KILL IE6

08 BOX MODEL

Block- und Inline-Elemente

Die meisten Elemente im Dokument sind entweder Block- oder Inline-Elemente. Die Elemente unterscheiden sich in folgenden Punkten: Block-Elemente können Inline-Elemente und andere Block-Elemente beinhalten. Inline-Elemente haben nur Daten oder andere Inline-Elemente als Inhalt. Block-Elemente bilden gröbere Strukturen als Inline-Elemente. Block-Elemente beginnen in einer neuen Zeile, Inline-Elemente nicht. Oft wird zwischen Block-Elementen ein Abstand dargestellt, z.B. Absätze oder Überschriften. Das Element body darf in XHTML keine Inline-Elemente beinhalten. Sie müssen immer in einem Block-Element liegen.

BOX MODEL

Im Prinzip lassen sich alle Elemente in CSS als rechteckige Boxen beschreiben. Die foldgende Werte können mitgegeben werden.

margin Aussenabstand (Abstand ausserhalb der Box)
border Rahmen (Rahmenbreite)
padding Innenabstand (Abstand innerhalb der Box zum Content)
top oben
right rechts
bottom unten
left links
width Breite
height Höhe

BOX MODEL HACK

Nach W3C-Vorgaben gibt die Eigenschaft width einer Box dessen Innenbreite an. Innenabstand padding, Rand border und Aussenabstand margin werden zur Breite hinzugerechnet. Das Gleiche gilt für die Höhe.
(!!) IE 5.X WIN (!!) interpretiert das Box-Modell leider falsch. Rahmen und Innenabstand werden in die Breite gerechnet. Das heisst also, bei einem Rahmen von 200px mit 20px Innenabstand und 10px Rand, rechnet der IE 200px Mozilla aber 260px. Dies kann extrem störend sein, wenn man pixelgenaues Layout plant.
TANTEKS HACK: (nach seinem Erfinder genannt) nutzt eine Interpretationsschwäche.

#box {      
border:10px solid #000;
width:200px;
padding:20px;
voice-family: "\"}\"";
voice-family: inherit;
width:140px;
}

width:200px; ist die Angabe für IE PC, nach voice-family: "\"}\""; bricht er ab. Die anderen Browser lesen den unteren Wert und überschreiben den oberen, ausser Opera, der hiermit nichts anfangen kann.

html>body #box {
width:140px;
}

be nice to opera ;) mit dieser Syntax bringt man den Opera dazu, den Layer in der gewünschten Breite darzustellen. THANKS TO GLISH

weitere Artikel