created: April 04, 2004 - modified: June 10, 2008

Problem addressed

The handling of borders and margins in Windows Internet Explorer (IE), known as the Box Model Problem

Solution

This problem has been fixed for Windows IE 7.0

  1. Include <?xml version="1.0" encoding="UTF-8"?> as the first line in your documents. This is recommended by the W3C and will force IE 6 in to quirksmode, so that it will behave the same way as previous versions of IE (reducing the amount of work you need to do).
  2. Create a stylesheet for IE 4.x to 6.x browsers modifing the width and height of boxes to include the width of margins and borders.
  3. Use my browser specific stylesheets method to target the quirky stylesheets to the supported browsers.

What is Quirks Mode?

Holly Bergevin and John Gallant have written an excellent article explaining Doctypes, Standards, and Quirks mode

Background

This one drove me crazy when I was first learning CSS. WIN IE 4.x, 5.x and 6.x in quirksmode places borders and margins on the inside of an elements "box", where "Standard" browsers (basically everything else) place them on the outside.

So an element set to 100px wide with a margin, and border stays 100px wide with the margin and borders placed inside the box. Everything else gets a width of: 100px + margin width * 2 + border width *2. Same goes for height. You can see the problem.

I decided to use conditional comments in my browser specific stylesheets method instead of relying on css hacks to minimize future compatibility issues.