Currently your browser is: Unknown  Version: 0 0 on Unknown

Date when this test was originally made: 2006-12-21

Win IE 5 (always) and IE 6 (in quirks mode) / IE 7 (in quirks mode) demonstrate the so-called: box model bug

IE 6 (with valid DOCTYPE) IE 7 and IE on Mac comply with the W3C recommendation and do not have the bug.

Win IE 5 (and IE6 / IE7while in quirks mode) box calculation:

Overall width of a box INCLUDES PADDING width and BORDER width: E.g.: you declare a width: 200 and Padding: 25 (==on each side) and border: 5px (==on each side) THEN your overall box from the left to the right side of your border has has a width of 200 pixels. That's the dimension it takes in your browser window. E.g. in a 800 pixel browser window you could place 4 boxes next to each other (please ignore for a moment that there could be a scroll bar that takes room away;-) Note: ... whereas margins are not included in the old IE5 box calculation model: Margin widths live OUTside the box dimensions.

The DOCTYPE declaration

If you include a standard doctype in your document, e.g.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Check this website for available DOCTYPEs: http://www.w3.org/QA/2002/04/valid-dtd-list.html
...then IE 6 / IE 7 behaves according to the W3C box model.

Force IE into quirks mode even with DOCTYPE declaration
IE 6 AND IE 7 fall automatically into Quirks mode if you have something before the Doctype statement, e.g. a html comment OR an XML declaration etc.. Be carefull and avoid such pitfalls.

W3C Box model (Mozilla, IE6 / IE 7 (both in standard mode):

Padding, Border, and Margin WIDTHs live OUTside the box calculation and WILL ADD up to your overall dimesion.
E.g.: you declare a width: 200 and Padding: 25 (==on each side) and border: 5px (==on each side): now you need 260 pixels for one box and 4 boxes next to each other need 4 times 260 pixels!!!