Box Model

The Box Model

The box model defines how browsers lay out their pages, using their height, width, padding, margin and border. The standards-compliant ("standards mode") way is to take the height and width, and add the padding and borders onto these values. So a box with a width and height of 100px and a padding of 50px would have an overall height and width of 300px. This is how it is defined in the W3C standards, and how all browsers do it apart from Internet Explorer when running in "quirks mode" (ie backwards compatible, non-standards). IE includes the padding and border within the width and height. This difference means that you have to provide CSS hacks so that elements are the same size in IE quirks and standards-browsers.

However, the situation has just been rectified, and also got more complicated. IE7 now adheres to the W3C standards box model. IE6 almost adheres to the W3C standards when it is in standards mode, but not in quirks mode. The mode that it uses to lay out a page is dependent on the DOCTYPE. Pre-IE6 browsers use the quirks layout mode for all DOCTYPEs.

Layout mode used in Internet Explorer 6 based on Doctype

Doctype	Url in Doctype?	Xml Declaration?	Layout Mode
HTML 4.01 Strict	No	No	Standards
HTML 4.01 Transitional	No	No	Quirks
HTML 4.01 Strict	Yes	No	Standards
HTML 4.01 Transitional	Yes	No	Standards
XHTML 1.0 Strict	Yes	No	Standards
XHTML 1.0 Transitional	Yes	No	Standards
XHTML 1.0 Strict	Yes	Yes	Quirks
XHTML 1.0 Transitional	Yes	Yes	Quirks

See here for full list.

To get round the box-model inconsistencies, we use CSS hacks that take advantage of browser bugs or differences in CSS support to target different browsers. A common way to differenciate IE from standards-browsers is to use the !important declaration in your CSS. This tells all standards-browsers not to override this value - but IE doesn't understand !important, so you can override the value on the line below and it is picked up by IE only. In IE7 beta2, they had fixed the box model, but not the !important bug. This meant that the CSS hack compensated for a bug that no longer existed. Fortunately, in the first full release of IE7, this situation has been remedied, and !important is now recognised, and therefore the hacks still work as they recognise IE7 as a standards-compliant browser. Phew! I tested this in version 7.0.5730.11 and was extremely relieved. This just leaves IE6 in strict mode (ie non-quirks) as the problem - this will use standards based box model, but still has the !important bug.

References

• Box Model Hack
• Doctype Changing Layout Mode