Wie breit ist width ?
Anzeige
Laut W3C bezeichnet die Style Angabe "width" die innere Breite. Kommen Ränder hinzu, müssen diese gesondert berücksichtigt werden. Ansonsten wird unter Umständen das Layout gesprengt. Eine weitere Tücke hält der Doctype bereit. Fehlt dieser, zeigt der Internet Explorer 6 die Breite falsch an.
Dies liegt am so genannten Kompatibilitätsmodus, der für ältere Dokumente aktiviert wird. So soll ein einheitliches Aussehen zur Vorgängerversion gewährleistet werden – auch wenn die Breite dabei genauso wie im IE 5 falsch dargestellt wird. Ob der Browser diesen Modus nun aktivieren soll oder nicht, erkennt er am definierten Doctype. Fehlt dieser oder ist er auf dem neuesten Stand, werden die Webseiten nach den alten Regeln dargestellt.
Livedemo in neuem Fenster:
So sorgt zum Beispiel das vom Dreamweaver MX (2002 Edition) vergebene Doctype für "einfache HTML-Seiten" dafür, dass die Seite nicht richtig angezeigt wird – obwohl der Browser es könnte:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
der Doctype für XHTML dagegen sorgt dafür, dass der IE 6 width nur für die innere Breite verwendet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Das Ganze ist Mozilla und Opera ziemlich egal. Mozilla zeigt die Breiten korrekt an, indem width nur den inneren Abstand bestimmt, Operas Version 7 dagegen macht mit beiden Doctypes alles falsch.
So ist es richtig, der untere Kasten ist größer, der Innenraum gleich
Die angegeben Werte für padding und border werden zweimal, einmal links, einmal rechts, zu der mit width festgelegten Größe hinzugefügt. Da der obere Kasten 202 Pixel breit ist, würde ein width: 162px den unteren Kasten gleich breit setzen.
<div
style="width: 200px; border: 1px solid black;">
Kasten 1
</div>
<div style="width: 200px; padding: 10px;
border: 10px solid black;">
Kasten 2
</div>
Zu der inneren Breite von 200 Pixeln kommen bei Kasten 2 noch zweimal 10px Innenabstand sowie zweimal 10px schwarzer Rand hinzu, der Kasten ist so insgesamt 240 Pixel breit.
Verwandte Artikel
Meine Meinung
Bitte beachten Sie: Werbung und Spam sind unerwünscht und können eine Rechnung zur Folge haben. Woher kommen die Bilder neben den Kommentaren?
