Wenn CSS boxen geht

Zwei Artikel über das Box Model geben einen recht guten Überblick über die zu beachtenden Fallstricke -- namentlich, dass MSIE in den Versionen 5.x width-Parameter eher... kreativ interpretiert. Jedenfalls anders, als es die Spezifikation vorsieht. Okay, reden wir nicht drum rum: total falsch.

Zum Glück gibt es den bekannten Box Model Hack von Tantek Çelik, den gestresste CSS-Schreiber gelegentlich als Einschlafmeditation herunterbeten.

Holly Bergevin beschreibt das Problem für Einsteiger:

At first, the box model may be confusing, but it is a necessary concept to grasp. Unfortunately, simply understanding the W3C box model is not the only thing you need to make your web pages look similar in different browsers.
http://www.positioniseverything.net/articles/box-model.html

Ein ganz neues Problem ergibt sich daraus, dass MSIE 6.0 es endlich richtig macht. Naja, fast richtig (position: fixed klappt immer noch nicht), sofern in der ersten Zeile des HTML-Dokuments nicht etwas anderes steht als der DocType -- dann benimmt er sich wie MSIE 5.x. Mit diesem Browser-Wald müssen sich Web-Designer bis mindestens 2006 arrangieren, sofern sie nicht auf HTML 3.2 downgraden. Tag-Suppe. Ähbäh.

Welche Probleme sich aus einem fehlenden oder falsch positionierten !DOCTYPE ergeben können, beschreibt Bergevin in einem zweiten Artikel.

How can a browser tell if the page it is parsing should be treated as standards-compliant or not? The solution that browser manufacturers settled upon was to create two different rendering modes, enabled by what is known as a "Doctype Switch."
http://www.positioniseverything.net/articles/doctypes.html

Beide Artikel wenden sich in erster Linie an CSS-Novizen, können aber auch alten Style-Sheet-Hasen bei der Auffrischung ihrer Kenntnisse dienen.

Weiterführende Links

• Methode zur Umgehung des Box-Model-Problems in MSIE 5.x:
  Box Model Hack von Tantek Çelik
  http://www.tantek.com/CSS/Examples/boxmodelhack.html
• Einführung in das Box Model und die Probleme mit MSIE:
  The Box Model Problem von Holly Bergevin
  http://www.positioniseverything.net/articles/box-model.html
• Die Rendering-Modi moderner Browser und die Folgen:
  Rendering Mode and Doctype Switching von Holly Bergevin
  http://www.positioniseverything.net/articles/doctypes.html