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.
Weitere Beiträge:
- 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
- Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
- Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
- Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
- Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
- 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
- Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.
Loading ...
Noch keine Kommentare vorhanden!