There are two things you should be aware of when developing CSS styled lists
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.
The solutions are to work around the problem using nested divs or use one of many box model hacks.
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
|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|