zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Internet Explorer vs. Firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2009, 17:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard Internet Explorer vs. Firefox

Hallo.
Warum passt das im Firefox (rot und blau nebeneinander) und nicht im Internet Explorer 6 (blau rutscht runter)?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
  font: 100.01%/1.5 Arial, Helvetica, sans-serif;
  width: 100%;
  background: white;
  color: black;
}
ul {
  background-color: red;
  float: left;
  width: 25%;
  min-height: 25em;
  list-style: none;
}
a {
  display: block;
  padding: 1em;
}
#inhalt {
  background-color: blue;
  margin-left: 31%;
}
#wrapper {
  min-width: 800px;
  max-width: 50em;
  margin: 0 auto;
  border: 1px solid black;
}
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.clearfix { display: inline-block; }
/* IE-Mac  \*/
* html .clearfix { height: 1px; }
.clearfix { display: block; }
/* Ende */

/* Whitespace Bug */
* html ul a { height: 1px }

/* min/max-width IE < 7 */
* html #wrapper { width: 800px; }
</style>
<![endif]-->

</head>
<body>
<div id="wrapper" class="clearfix">
  <ul>
    <li><a href="#">einseinseins</a></li>
    <li><a href="#">zweizweizwei</a></li>
    <li><a href="#">dreidreidrei</a></li>
  </ul>
<div id="inhalt" class="clearfix"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <b>Der blaue Absatz schließt das grüne Bild ein und beginnt auf gleicher Höhe wie die gefloatete Liste.</b> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><img src="test.jpg" style="float:right;" /></div>
</div>
</body>
</html>
Reicht es zur Korrektur aus, dem Internet Explorer einen anderen margin-left Wert zu geben?

Hier das Bild: http://www.bilder-space.de/show.php?...Gq2dx7k4hl.jpg

Geändert von Kendis (07.09.2009 um 17:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2009, 17:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Bei mir rutscht im IE 6 nix runter, aber ich würde es eh anders lösen: Um innerhalb von #inhalt uneingeschränkt clearen zu können, sollte Inhalt ebenfalls floaten (width in % kann es bekommen).

Dann klappen zwar Deine gleich hohen Spalten per clearfix nicht mehr, aber die funktionieren eh in zuvielen Browser nicht, daher würde ich FAQ 1 anwenden (funktioniert auch bei Prozentbreiten, durch bg-pos. mit horiz. Prozentwert).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2009, 17:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard

Hallo heiko_rs.
Auch nicht wenn du #inhalt margin-left erhöhst (35% z.B.)?
Wenn ich #inhalt ebenfalls floate, führt dass nicht dazu dass ich nachher quasi alles floaten muss? Gibt das keine anderen Probleme? Habe gehört, man soll mit Floats möglichst sparsam umgehen, weil ältere Browser mit zunehmender Anzahl schnell Fehler machen.

Welche Browser kommen denn mit clearfix nicht zurecht?
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2009, 17:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Kendis Beitrag anzeigen
Auch nicht wenn du #inhalt margin-left erhöhst (35% z.B.)?
Auch dann nicht. Wie breit ist test.jpg?

Zitat:
Zitat von Kendis Beitrag anzeigen
Wenn ich #inhalt ebenfalls floate, führt dass nicht dazu dass ich nachher quasi alles floaten muss?
Nein, es sollte nur ein clearendes Element auf die beiden Spalten folgen, z.B. ein Footer (siehe auch FAQ).

Zitat:
Zitat von Kendis Beitrag anzeigen
Habe gehört, man soll mit Floats möglichst sparsam umgehen, weil ältere Browser mit zunehmender Anzahl schnell Fehler machen.
Allenfalls der IE < 8 (noch mehr die Versionen < 7), aber selbst der hat im konkreten Fall weniger Probleme, wenn beide Spalten floaten. Die besagten IE-Versionen haben zwar Probleme mit float, aber oft nur, wenn floats vereinzelt auftreten. Man kann nicht sagen, dass mehr Floats automatisch mehr Probleme bedeuten. Und sehr viele IE-Probleme lassen sich sogar durch float beheben.

Zitat:
Zitat von Kendis Beitrag anzeigen
Welche Browser kommen denn mit clearfix nicht zurecht?
In IE < 8 gibt es nicht den hier gewünschten clearfix-Nebeneffekt, ebensowenig in älteren Geckos.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 07.09.2009, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard

test.jpg ist 550px breit (siehe 1. Post, da kannst du es auch runterladen).

Hat es denn überhaupt mal Vorteile, wenn man nur eine der beiden Boxen floatet und die andere per margin daneben platziert, oder ist es immer ratsam "soviel wie möglich" per Float zu regeln?
Mit Zitat antworten
  #6 (permalink)  
Alt 07.09.2009, 18:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Kendis Beitrag anzeigen
test.jpg ist 550px breit
Alles klar, das ist offensichtlich zuviel für die rechte Spalte, dadurch sie dehnt der IE < 7 aus und sie rutscht runter.

Zitat:
Zitat von Kendis Beitrag anzeigen
Hat es denn überhaupt mal Vorteile, wenn man nur eine der beiden Boxen floatet und die andere per margin daneben platziert
Allenfalls wenn die margin-Box keine Breite bekommen darf.

Zitat:
Zitat von Kendis Beitrag anzeigen
ist es immer ratsam "soviel wie möglich" per Float zu regeln?
Ja, denn Du siehst ja, was sonst passiert: Dein clearfix-Pseudoelement rutscht unter die Navi. Was bei Dir Absicht ist, ist meist nicht erwünscht (abgesehen davon, dass Deine Methode eh in zu vielen Browsern nicht funktioniert).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.09.2009, 18:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Alles klar, das ist offensichtlich zuviel für die rechte Spalte, dadurch sie dehnt der IE < 7 aus und sie rutscht runter.
Ja, deswegen hatte ich hier überlegt einfach den margin-left Wert für IE < 7 anzupassen.

Zitat:
Allenfalls wenn die margin-Box keine Breite bekommen darf.
Ja, ich dachte ich lasse die rechte Box einfach die restliche Breite einnehmen

Zitat:
Ja, denn Du siehst ja, was sonst passiert: Dein clearfix-Pseudoelement rutscht unter die Navi. Was bei Dir Absicht ist, ist meist nicht erwünscht (abgesehen davon, dass Deine Methode eh in zu vielen Browsern nicht funktioniert).
Also #inhalt am besten mit width: 75% nach links floaten (ohne margin-Angaben), und dann innerhalb von #inhalt noch ein div anlegen mit dem ich die Abstände festlege? Ich könnte es ja auch mit padding für #inhalt machen, aber man soll %-Angaben ja nicht mit anderen mischen. (Also width 75% aber dann padding 1em oder so)
Mit Zitat antworten
  #8 (permalink)  
Alt 07.09.2009, 18:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard

Nochmal zum verdeutlichen, wie ich es meine:
http://www.bilder-space.de/show.php?...Vro2biQWFH.jpg
Mit Zitat antworten
  #9 (permalink)  
Alt 07.09.2009, 20:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Kendis Beitrag anzeigen
ich dachte ich lasse die rechte Box einfach die restliche Breite einnehmen
Tust Du eh nicht, denn margin-left: 31%; ist gleichbedeutend mit width: 69%; (und rechts floatend). Das beantwortet auch gleich Deine nächste Frage.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.09.2009, 20:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2009
Beiträge: 8
Kendis befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Tust Du eh nicht, denn margin-left: 31%; ist gleichbedeutend mit width: 69%; (und rechts floatend).
Ok, hab ich verstanden.

Zitat:
Das beantwortet auch gleich Deine nächste Frage.
Leider nein, magst du mir das nochmal erklären?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Firefox ok, Internet Explorer viel zu groß. Tobb (X)HTML 1 22.10.2010 13:30
Firefox zeigt mittig / Internet Explorer 8 links *** warum ?? i_dont_know CSS 2 09.11.2009 11:19
Firefox und Internet Explorer messerjocke CSS 0 15.09.2008 18:33
Internet Explorer und Firefox Css?? p.rogge CSS 4 24.06.2008 18:26
Firefox und Internet Explorer 7 vertragen sich immer noch nicht kadees Offtopic 3 01.08.2007 13:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:47 Uhr.