Layout-Probleme mit IE6, IE8 und Opera

[molily]

man muss sich sehr gut mit der Materie auskennen um die Antwort(en) zu verstehen.

Man gerät bei einem einfachen CSS-Spaltenlayout leider sehr schnell in Gefilde, wo man ohne dieses Wissen aufgeschmissen ist.

("Three-Pixel-Jog", "Negative Backside Margin", "BFC" usw.)

Was diese Begriffe bedeuten, sollte zumindest teilweise aus  meiner Erklärung und dem Beispieldokument hervorgehen, das die Anwendung demonstriert. Aber ich kann es gerne nachliefern, sofern es daraus nicht klar geworden sein sollte.

• Three-Pixel-Jog ist ein IE-5/6-Bug, der ein Element neben einem Float um 3 Pixel verschiebt, wie man in Beispiel 2 sieht.

• Negative Backside Margin ist ein IE-Fix, bei dem einem Float entgegen seiner Float-Richtung (z.B. float:left > Hinterseite ist right, float:right > Hinterseite ist left) ein negativer margin-right bzw. margin-left gegeben wird. Dieser Fix wird in Beispiel 2 angewendet. (Genauer gesagt funktioniert das Beispiel noch ein wenig anders: Das Element floatet nicht, der negative margin-right hilft trotzdem gegen den Rundungsfehler.)

• Block Formatting Context (BFC) ist ein CSS-internes Element-Verhalten, das von einigen CSS-Eigenschaften angeschaltet wird und das gewisse Auswirkungen hat, die man sich zur Nutze machen kann. Dazu gehören:
   -- Einschließen von Floats
   -- Keine Überlappung mit Floats (BFC liegen automatisch neben Floats)
   -- Sie etablieren einen neuen Float-Kontext, sodass clear sich nicht dokumentweit, sondern nur auf alle Floats im aktuellen BFC auswirkt

• Die Kenntnis von hasLayout habe ich auch stillschweigend vorausgesetzt, sie ist fürs Layouten für IE 6 unverzichtbar. hasLayout ist ein IE-internes Konzept, das auf einer unzureichenden CSS-Umsetzung beruht. IE bis einschließlich 7 kennt kein BFC, aber wenn ein Element »Layout hat« hat, verhält es sich ähnlich wie ein BFC und zeigt noch viele weitere Eigenheiten. Es wird ebenfalls von gewissen CSS-Eigenschaften angeschaltet (z.B. zoom:1). Manche Elemente haben standardmäßig hasLayout. In vielen Fällen muss man Elementen im IE 6/7 hasLayout vergeben, damit das Layout stabil und fehlerfrei ist, um einen BFC zu emulieren oder weil IE das Element ohne hasLayout nicht wie gewünscht darstellen würde.
  Grundlagenartikel zu hasLayout in dt. Übersetzung

Die Zitate (und/oder Verweise) auf  das Buch finde ich lustig, denn das Buch hat bei der Fülle an Büchern vielleicht 1 von 50 "Webdesigner".

Natürlich hat das niemand, aber es gibt im Web keine deutschsprachige Literatur, die diese Sachverhalte so gut darstellt. Ich verweise nur darauf, um meine Quellen offenzulegen, aber auch, um Leuten zu raten, sich so eine Lektüre (am besten diese) anzuschaffen.

Mathias