Box-Modell

Das Box-Modell definiert die Berechnung der Breite und Höhe von Elementen. Seit der CSS1-Spezifikation des W3-Konsortiums aus dem Jahre 1996 errechnet sich die Gesamtbreite eines Elements aus einer Addition


Wird ein Element 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 definiert, beträgt die tatsächliche Breite letztendlich 280 Pixel (20 für <code>border-left</code>, 20 für <code>padding-left</code>, 200 für <code>width</code>, 20 für <code>padding-right</code> und 20 für <code>border-right</code>), die Höhe 180 Pixel (20 für <code>border-top</code>, 20 für <code>padding-top</code>, 100 für <code>height</code>, 20 für <code>padding-bottom</code> und 20 für <code>border-bottom</code>). Ein zusätzlich definierter Außenabstand müsste zu diesen Werten nochmals addiert werden.

Das Box-Modell-Fehler des Internet Explorer

Als "Box Model Bug" wird der Fehler in älteren Windows-Versionen des Internet Explorer (einschließlich 5.5) bezeichnet, die Innenabstände und Rahmenstärken entgegen der Spezifikation nicht zur Gesamtbreite zu addieren - dies ist nur beim Außenabstand korrekt der Fall. In oben angeführtem Beispiel ergibt sich damit eine Gesamtbreite von 200 Pixel, also lediglich die mittels <code>width</code> definierte Breite.

Umgehungsstrategien für mangelhafte Browser

Die einfachste Variante, den Box-Modell-Fehler zu umgehen, besteht darin, auf den Versuch, ein pixelgenaues Layout zu erreichen, zu verzichten und allen Elementen etwas Freiraum zu lassen, sodass etwaige Abweichungen zwar vorhanden sind, aber die Darstellung nicht beeinträchtigen.

Trennung der Breite und Höhe von Rahmen und Innenabstand

Eine Möglichkeit, eine einheitliche Darstellung zu erreichen, besteht darin, auf die gleichzeitige Angabe von <code>width</code> bzw. <code>height</code> und <code>border</code>/<code>padding</code> bei ein und demselben Element zu verzichten. Dies erreichen Sie mittels eines zusätzlichen Elements, das mit der gewünschten Gesamtbreite entsprechend dem korrekten Box-Modell definiert wird. Dem inneren Element können Sie nun problemlos <code>border</code> und <code>padding</code> zuweisen, da die Berechnung der Breite des äußeren Elements davon nicht beeinflusst wird.

<div style="width:280px;">

<p style="padding:20px; border:20px solid #66a">Soll-Breite: 280px</p>

<p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p>

</div> 

 

 

Browserweichen (CSS-Hacks)

Es ist möglich, Browsern die gewünschten CSS-Eigenschaften zukommen zu lassen und problematische Deklarationen vor anderen Browsern mit Hilfe einer  CSS-Browserweiche zu "verstecken" - dies wird als "Hack" bezeichnet.

 

Tan-Hack

Speziell zur Umgehung des Box-Modell-Fehlers im Internet Explorer 5.x für Windows eignet sich der "Tan-Hack" (auch "Modified Simplified Box Model Hack" genannt). 

#######################################################

<style type="text/css">

#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 */ }

</style>

</head>

<body>

<div id="bereich">Soll-Breite: 280px</div> <p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p> 

#####################################################################
 

Tantek-Hack

Auch der sogenannte "Tantek-Hack" korrigiert die Darstellung im Internet Explorer 5.x für Windows.

<style type="text/css">

#bereich { padding:20px; border:20px solid #66a; width:280px;

voice-family:"\"}\""; /* ab hier ignoriert IE 5.x nachfolgende Deklarationen */

voice-family:inherit; width:200px; }

</style>

</head>

<body>

<div id="bereich">Soll-Breite: 280px</div> <p><img src="lineal.gif" width="300" height="20" alt="Lineal"></p> 

##################################################################