CSS-FAQ

ID #1003

Problem:
In einem DIV ist ein Bild mit 500px-Breite in dem anderen DIV ist Text mit auch 500px-Breite. Im IE ist der Text schmaler. Was ist los ?

Lösung:

Wenn das Problem auch im IE6 auftritt, dann fehlt eingangs des Quelltextes eine DTD. Dann geht der IE6 in den Quirks-Modus und verhält sich wie ein 5er-Modell.

Es handelt sich jedenfalls um den allseits beliebten "Box-Model-Bug". Ausführliche Erläuterungen der Gegenmaßnahmen gibt es bei Fabrice Pascal.
Ich empfehle den Simplified Box-Model Hack oder noch besser: den Bindestrich Hack. Bei Letzterem ist es so, daß man einen Bindestrich vor eine CSS-Definition setzt, die dann nur vom IE und nicht von "richtigen" Browsern interpretiert wird.

Vor der "Behandlung":

#content { 

   padding: 10px;

   border: 10px solid #000;

   width: 500px;

}

Nach der "Behandlung":

#content { 

   padding: 10px;

   border: 10px solid #000;

   width: 500px;

   -width: 540px;

}

Laut W3C ergeben sich Breite und Höhe einer Box folgendermaßen:

Quote: Die Box-Breite ist die Summe der linken und rechten Ränder, Rahmen und Polsterung sowie der Inhaltsbreite. Die Höhe ergibt sich aus den unteren und oberen Rändern, Rahmen und Polsterung sowie der Inhaltshöhe.

Polsterung ist hierbei "padding".
Der IE addiert aber nicht, sondern nimmt "width" als die Summe und zieht davon dann padding und border ab. Alle anderen addieren korrekt padding, border und width zur Gesamtbreite, die es so als angebbaren Wert nicht gibt.

Bewertung der Nützlichkeit dieses Artikels:

Durchschnittliche Bewertung: 4.56 (9 Abstimmungen)

vollkommen überflüssig 1 2 3 4 5 sehr wertvoll

Artikel zu kommentieren.

Name:
E-Mail:
Eingegebener Kommentar:

Bitte die Zeichen der Captcha-Grafik eingeben