The IE box model and Doctype modes

This is a great reference on what actually happens on IE in different browsers when working with the IE box model. Great to finally figure out the skinny on how this all fits together. I love this site.

Be sure to read this whole article if you really care to know more about properly rendered HTML.

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.

Read the rest of the article