Information 03

Das Box-Model-System

Die CSS3-Eigenschaft "box-sizing" greift schon ab Internet-Explorer Version 8. Wir arbeiten in dieser Vorlage mit diesem neuen und sehr viel einfacherem Boxmodel-System. Warum es einfacher ist, lesen Sie nachstehend.

Das alte Box-Model

Das alte Box-Model ohne box-sizing beschreibt eine Containerbox wie folgt: Margin, border und padding werden ausserhalb der Inhaltsbox platziert und so noch auf die Breite des Inhalts addiert. Nicht nur das alles schwerer auszurechnen ist, schlimmer noch: Minimale Änderungen von nur 1 Pixel als Beispiel bei einer Umrahmung mittels border, konnten das ganze Layout kaputt machen.

Das neue Box-Model

Das neue Boxmodel mit box-sizing platziert padding und border innerhalb der Inhaltsbox und läßt dabei die Breite unverändert. Nur margin wird ausserhalb der Box platziert. Ab Internet-Explorer Version 8.

IE-Version 7 kann kein Box-Sizing

Für den Internet Explorer Version 7, welcher kein box-sizing versteht, fügen wir eine Browserweiche per Conditional Comments ein. Per CSS-Datei erhält diese Browserversion somit Anweisungen für das alte Boxmodel.
Zur Erklärung:
Conditional Comments sind Kommentare in HTML-Dokumenten, die nur vom Browser Internet Explorer interpretiert werden.