Unerwünschtes "Indenting" bei floats im Internet Explorer

[greg]

Hallo,

Hier (siehe URL) erzeugt der Internet Explorer einen kleinen Indent für den im #content befindlichen Text, aber nur da, wo der "float: left" positionierte Teil ist. Das soll nicht so sein. Alle anderen getesteten Browser (Opera, Mozilla, Konqueror) stellen es korrekt dar.

Wieso genau ist das so? Wieder nur ein CSS-Bug des IE? Mir wären sogar Workarounds lieb, da sich das gewünschte Layout mit CSS-Floats sehr elegant realisieren lässt.

[Thomas Luethi]

Hallo,

Wieder nur ein CSS-Bug des IE?

Bin gerade unter Linux und kann deshalb Dein Problem nicht nachvollziehen.
Nach Blick in den Quelltext habe ich den Eindruck, es koennte am kaputten
Box Modell des MS IE liegen, das bei Versionen bis 5.5 immer zum Zug kommt,
bei Version 6.0 im "Quirks" Modus.

Aus Deinem Quelltext:

#nav {
 float: left;
 padding: 1em;
 width: 8em;
}

#content {
 margin: 0 0 0 10em;
 padding: 1em;
 background: #fff8dc;
}

1+8+1 gibt 10.
Aber MS IE (kaputt) rechnet: 1+10+1 gibt 12.

Wenn Dir der MS IE <6.0 sehr, sehr wichtig ist, kannst Du
das Problem wie folgt loesen:
#content { margin:0 0 0 12em }
(oder zur Sicherheit gleich 12.5em )

Vielleicht hilft Dir der Box Model Hack von Tantek weiter:
http://tantek.com/CSS/Examples/boxmodelhack.html

Gruesse,

Thomas

[molily]

Hallo,

Nach Blick in den Quelltext habe ich den Eindruck, es koennte am kaputten Box Modell des MS IE liegen, das bei Versionen bis 5.5 immer zum Zug kommt, bei Version 6.0 im "Quirks" Modus.

Ja, MSIE 6 schaltet aufgrund der XML-Deklaration in den Kompatibilitätsmodus. Deshalb sollte sie zumindest beim Ausliefern des Dokuments in diesem Falle vermieden werden.

Aus Deinem Quelltext:

#nav {
 float: left;
 padding: 1em;
 width: 8em;
}

1+8+1 gibt 10.
Aber MS IE (kaputt) rechnet: 1+10+1 gibt 12.

Nein, er zieht das padding von der Breite der content edge ab, macht das Element also inklusive padding 8em breit, legt das padding innen an und staucht den Inhalt auf 6em zusammen. Dadurch wird das Element im Vergleich zum W3C-Boxmodell kürzer, nicht länger.

Wenn Dir der MS IE <6.0 sehr, sehr wichtig ist, kannst Du das Problem wie folgt loesen:
#content { margin:0 0 0 12em }
(oder zur Sicherheit gleich 12.5em )

10em wäre schon richtig, es würde eben im MSIE 5.x (und momentan auch im MSIE 6) eine Lücke von 2em entstehen.

Im Übrigen meinte Greg etwas anderes, nämlich eine Verschiebung des Inhalts von #content um wenige Pixel nach rechts entlang der Höhe von #nav:

<img src="http://home.t-online.de/home/dj5nu/fanhost/msie-float.png" border="0" alt="">

(Mit border-left für p und zusätzliche span-Elemente darin.) Woran das liegt, weiß ich allerdings auch nicht, ich finde auch keinen Weg, es zu umgehen; es tritt übrigens unabhängig vom Rendermodus auf (MSIE 6).

Mathias