Home arrow HTML & CSS arrow CSS: Box Model Hack
CSS: Box Model Hack Drucken E-Mail
Geschrieben von MK   
07.08.2005

Die Browserversionen des MS Internet Explorers 5.x interpretieren das Box-Modell-Konzept von CSS 1 falsch.
Wird eine Box zum Beispiel folgendermaßen ausgezeichnet - #box { width: 200px; padding: 20px; border: 20px solid #66A; } - ergibt sich die gesamte Breite der Box aus Breite = 200px + 2x Innenabstand = 40px + 2x Rahmendicke = 40px mit insgesamt 280px.
Der MSIE 5.x erzeugt allerdings eine Box mit der Gesamtbreite von 200px. Der Rahmen und der Innenabstand werden "geschluckt", so dass für den Inhalt nun noch eine Breite von 120px zur Verfügung steht. Dieser Fehlinterpretation kann man mit sogenannten Box Model Hack's entgegenwirken. Im Internet habe ich hierzu drei Möglichkeiten gefunden:

1. TAN-Hack (selfhtml)

#bereich { width: 200px; padding: 20px; border: 20px solid #66A; }

* html #bereich { /* nur fuer Internet Explorer */ width: 280px; /* Version 5.x */ w\idth: 200px; /* Version 6 */ }

Dabei wird das "*"-Tag ausgenutzt, welches nur vom MSIE interpretiert wird.

2. Tantek-Hack (selfhtml)

#bereich { padding: 20px; border: 20px solid #66A; width: 280px; voice-family: "\"}\""; voice-family: inherit; width: 200px;

Ab "voice ..." ignoriert der MSIE 5.x nachfolgende Deklarationenen. Für standardkonforme Browser wird in der letzten Zeile die eigentlich gewünschte Breite festgelegt.

3. Trenton-Hack (evolt.org)

#box { width: 280px; }

#box div { border: 20px solid #66A; padding: 20px; }

Im HTML-Bereich wird Folgendes eingefügt:
<div id="box">div>Inhalt</div></div>

Hier wird im Individualformat "#box" die gewünschte Breite deklariert. Mit einer Verschachtelung "#box div" werden Rahmendicke und Innenabstand festgelegt. Dieser Hack ist vielleicht nicht ganz so elegant, da er der sogenannten "div-Suppe" Vorschub leistet.

Hinweis:

Um Fehlinterpretationen durch den MSIE 6 zu vermeiden, sollte dieser durch eine standardkonforme DTD stets in den Standard Mode versetzt werden.

Weitere Informationen dazu auf selfhtml.

 
< Zurück   Weiter >

Login






Passwort verloren?

Werbung

all-inkl.com webhosting