This issue was fixed in Internet Explorer 7 beta 2.
The what? The box model. What's that? If I ask the browser to draw a border around a DIV, it will look like a rectangle. That is called the box. What if I ask for the border to be 100 pixels wide. That's a bit extreme, but work with me here. If I then ask for the padding between the border and the text inside to be 100 pixels wide, and I ask the width of the DIV to be 500 pixels wide, exactly how much space does the text have? 100 pixels? 300 pixels? 500 pixels?
Well, and here's the problem, IE says it has 100 pixels, and the standard says it has 500 pixels (so the outside of the border is 500 + ( 2 x 100 ) + ( 2 x 100 ) = 900 pixels wide, according to the standard). You can see how this could cause problems. To be honest, I'm not sure whose implementation I prefer here. Each has its own merits. One says "I have this much space available, please use it", the other says "When you have finished playing around, I need this much space that I can actually use". The problem is that IE chooses not to follow the standard, so inevitably, we end up with differences between the browsers. The standard does offer us a way to switch between them, so theirs is the more flexible. But of course, IE thinks we don't need to care.
Not exactly true. IE 6 does follow the standard. As long as you use the HTML strict doctype. I am using the XHTML strict doctype, but because I also use the required XML conformance tag, IE decides that I don't want to use standards compliant response after all. Hay hay! Two incorrect implementations for the price of one.
This is the demo text.
This is the demo text.
This is the demo text.
This is the demo text.
This is the demo text.
Workaround: You can switch Opera and Mozilla (but not Safari) to use the Microsoft model, using
box-sizing:border-box;-moz-box-sizing:border-box; but the easiest thing to do is to use HTML strict - that
still won't help in IE 5.x. You can also use Erik Arvidsson's behaviour file
to make IE5+ use the correct box model in all modes. Most of us just try to make a design that doesn't look too bad either way.