KILL IE6

08 BOX MODEL

block and inline elements

There are two kinds of elements in a XHTML document, block and inline elements. They differ in the following ways:
Block elements may contain other block elements or inline elements, whileas inline elements can only contain text or other inline elements. Block elements are responsible for the broad structure of an XHTML document.
Block elements begin on a new line, inline elements don't. There is often a padding between block elements, such as paragraphs and headings. The body element may only contain block elements.

BOX MODEL

CSS uses a box model as conceptual framework for rendering a document. Each box can have the following properties:

margin (margin outside the box)
border (width of the border)
padding(padding inside the box)
top
right
bottom
left
width
height

BOX MODEL HACK

The CSS standard defines the width of a box as the width inside the box. Padding, border and margin are added seperately. The same applies to the height of a box.
(!!) IE 5.X WIN (!!) fails to implement the specification correctly. Border and width inside the box are added to the width. A box with a width of 200px, a padding of 20px and border of 10px results in a width of 260px in Mozilla and 200px in Internet Explorer. This can be extremely tedious if you want to do a pixel perfect layout.
TANTEKS HACK: (named after it's inventor) utilizes this weakness.

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

width:200px; is the defintion for Internet Explorer. IE stops processing the CSS rules after voice-family: "\"}\"";. Other browsers recognize the the value after it and overwrites the value. Opera doesn't, unfortunately

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

be nice to opera ;) This syntax works for Opera. THANKS TO GLISH

further Articles