Das Boxmodell und der Internet Explorer
Über das CSS-Boxmodell wurde an vielen Stellen schon viel geschrieben, weshalb ich mir nähere Eräuterungen hier sparen möchte. Stellvertretend für zahlreiche Erörterungen sei auf diesen Beitrag verwiesen.
Im Wesentlichen geht es darum, dass sich die Gesamtbreite eines Elements aus seiner eigentlichen Breite, den linken und rechten Innenabständen, den linken und rechten Rahmenbreiten sowie den linken und rechten Außenabständen ergibt.
Ich habe das in o.g. Quelle dargestellte Boxmodell mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Innenabstand und Rahmen von je 20 Pixel Stärke auf allen Seiten
einmal nachgebaut. Die Gesamtbreite müsste demnach 280px betragen: 20px für border-left, 20px für padding-left, 200px für width, 20px für padding-right und 20px für border-right.
Die Höhe 180 Pixel: 20px für border-top, 20px für padding-top, 100px für height, 20px für padding-bottom und 20px für border-bottom.
Wer sich Beispiel 1 mit dem Internet Explorer 6 oder 7 ansieht, erhält folgendes Bild:
Tatsächlich ist diese Box im Internet Explorer nur 200px breit und 100px hoch. Das CSS-Boxmodell wird hier also falsch dargestellt.
Im Beispiel 2 stellt der Internet Explorer dagegen das Boxmodell mit 280px Breite und 180px Höhe richtig dar:
Der Quelltext mit den Style-Angaben für die Box ist 100 Prozent identisch. Dennoch muss es eine Ursache geben, welche diese unterschiedliche Darstellung bewirkt.
Wer sich den Quelltext von Beispiel 1 und Beispiel 2 etwas näher unter die Lupe nimmt, wird den Unterschied gleich am Anfang in den ersten Zeilen bemerken:
Beispiel 2 enthält im Unterschied zu Beispiel 1 einen sogenannten "qualifizierten" Doctype. Er enthält zusätzlich die URL, unter der der Browser die Doctype-Dokumentation findet. Das ist - vereinfacht ausgedrückt - das Regelwerk aus dem sich ergibt, wie der Browser den Quelltext zu interpretieren hat.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Fazit:
Daraus können wir folgendes Fazit ziehen:
Enthält eine Seite überhaupt keinen, oder nur einen "einfachen" Doctype, so interpretiert der Internet Explorer das Boxmodell falsch.
Durch Angabe eines "qualifizierten" Doctypes unter Benennung der Doktype-Dokumentation URL ist es auch dem Internet Explorer möglich, das Boxmodell richtig zu interpretieren.
Achtet deshalb unbedingt drauf, dass eure Seiten einen qualifizierten Doctype enthalten, da nur dann der IE6 das Boxmodell auch richtig interpretiert.