Einer der elementarsten Aspekte von CSS ist das Box-Modell. Jedes Element (meint: Tag, ggf. mit Inhalt) einer Webseite wird mit bestimmten geometrischen Parametern betrachtet: Höhe, Breite, Rahmen, Außenabstand, Innenabstand (u.a.).
Skizze von Selfhtml
Über diese Angaben kann man im Prinzip die Darstellung einer Seite exakt (pixelgenau
) festlegen. Man muss nicht, man kann die Details auch den Voreinstellungen und Entscheidungen des Browsers überlassen, aber das Design mancher Seiten verlässt sich eben darauf, dass der Browser die Seite genau so anzeigt, wie der Standard es vorschreibt.
Nun haben der IE 5 und IE 5.5 sich dabei einfach mal verrechnet. Der Standard schreibt vor, dass Rahmenbreite und Innenabstand nicht zur Breite des Elements zählen (der Außenabstand zählt auch nicht dazu – aber das klappt bei Microsoft dann plötzlich wieder...). Diese fehlerhafte Arithmetik sorgt dann dafür, dass das Design nicht mehr stimmt (weil die Breite des Elements und die der horizontalen Innenabstände und Rahmenbreiten verringert wird). Und auch wenn es ein Leichtes gewesen wäre diese Panne – Fehler macht jeder mal – zu beheben (so wie Microsoft tausende anderer Programmierfehler mit Patches behebt), so hat MS diesen doch geradezu kultiviert, es zugelassen, dass die Webdesignergemeinde sich auf das Problem einstellt, so dass auch die neusten Versionen des IE diesen Fehler unter Umständen gezielt nachbilden.
<div style="margin:0;padding:0;"> <img src="box.demo.png" alt="Farbverlauf" style="margin:0;vertical-align:bottom;" /> </div> <p style="width:340px;margin:0;padding:20px;border:10px solid #4345fe;">Hier steht was – und es sollte in der Breite bitte zum Bild passen.</p>