molily: Layout-Probleme mit IE6, IE8 und Opera

Beitrag lesen

Zunächst mal etwas mit dem IE6, wahrscheinlich ein Bug-Klassiker, aber so lange mache ich noch kein CSS: Der Inhalt wird unter, anstatt neben der Sidebar angezeigt (Bild).

Da spielen verschiedene Bugs rein. Einerseits der Three-Pixel-Jog, andererseits Rundungsfehler bei der Umrechnung von Prozentwerten in Pixel.

http://molily.de/temp/css-ie6-float-bugs.html

Chao/Rudel schlagen ein Negative Backside Margin für die rechte Spalte vor (S. 347, 351). Das hilft dagegen, dass die rechte Spalte herunterfällt, aber nicht gegen den weiterhin auftretenden Three-Pixel-Jog (zweites Beispiel).
Der Fix für den Three-Pixel-Jog hilft auch gegen die Rundungsfehler (drittes Beispiel). Im Grunde ist der ja auch nur ein Negative Backside Margin, insofern ist das folgerichtig.
Eine weitere Möglichkeit wäre wie gesagt das floaten der rechten Spalte (viertes Beispiel).
Die ersten vier Beispiele beziehen sich nur auf IE-6-Verhalten. Das fünfte Beispiel ist dann browserübergreifend (Fix für Three-Pixel-Jog für IE 6, BFC mittels overflow:hidden für die rechte Spalte für standardkonforme Browser). Alle Beispiele arbeiten ohne margin-left für die rechte Spalte, weil sie durch hasLayout bzw. BFC automatisch neben dem Float positioniert werden und keine Überlappung stattfindet.

Der Verzicht auf eine feste width für die rechte Spalte hilft ebenfalls gegen die Rundungsfehler. Dann müsste die rechte Spalte mit zoom:1 hasLayout bekommen, weil width als hasLayout-Trigger ausfällt. Der Three-Pixel-Jog tritt dann dennoch auf, insofern reicht es wohl, mit dessen Fix beide Bugs zu umgehen (sehe dritten Beispiel bzw. das browserübergreifende).

Mathias