The IE box model and Doctype modes

There are two things you should be aware of when developing CSS styled lists

  1. IE and the box model
  2. IE versions and Doctype modes

IE and the box model

Love it or hate it, Internet Explore for Windows is the main browser on the web at present. This means that at some point you will have to deal with IE's incorrect interpretation of the box model.

In simple terms this means that some versions of IE render the box model to a different width than other Standards browsers. So, your CSS styled list may look narrower in IE compared to other browsers.

The diagram below shows that if a content box is set to 200px wide with 20px of padding and a 20px wide border, the correct method of calculating the overall box width is:
content (200px) + padding (20px+20px) + borders (20px+20px) = 280px.

However, some versions of IE calculate the width as:
content, padding and borders together = 200px.

Diagram of correct and IE's interpretation of CSS box model

The solutions are to work around the problem using nested divs or use one of many box model hacks.

IE versions and Doctype modes

So, which IE browsers use the correct doctype and which do not? The answer is that Win/IE5 incorrectly interprets the box model no matter which Doctype mode you use. However, Win/IE6 and Mac/IE5 correctly interpret the box model if there is a full and correct Doctype on the page as this switches them to "Standards-compliant mode". But what does all this mean?

All HTML documents should start with the correct Doctype. This is the first step in creating valid HTML code. Some browsers have different rendering modes depending on how the doctype is used. IE has two modes; "Standards-compliant mode" and "Quirks mode" depending on whether a full or partial Doctype is used.

Below is a chart that shows the various IE browsers, and how the doctype affects the way they render the box model. The blue highlight indicates incorrect interpretation of the box model

IE Browsers, doctypes and the box model
Doctype used Win/IE5 Win/IE6 Mac/IE5
HTML 4.01 Transitional - missing doctype Quirks Quirks Quirks
HTML 4.01 Transitional - missing URL from doctype Quirks Quirks Quirks
HTML 4.01 Transitional - full doctype Standards Standards Standards
XHTML 1.0 Transitional - missing doctype Quirks Quirks Quirks
XHTML 1.0 Transitional - missing URL from doctype Quirks Quirks Standards
XHTML 1.0 Transitional - full doctype Quirks Quirks Standards
XHTML 1.0 Transitional - missing Prolog Standards Standards Standards
XHTML 1.0 Transitional - missing Prolog and URL Standards Standards Standards