Internet Explorer Broken Box Model

Internet Explorer prior to version 6 (as well as more recent versions of IE where the web page doesn't have a valid doctype) use a different box model for laying out the web page to that specified in the standards. This has an effect on how the web page content is set out on the web page since the box model is what determines the sizes of the boxes into which your web page content is placed.

The box model defines the affect that adding margins, padding, and borders to your content affect the width and height available in which to display your content. With the standard box model all of these are added around your content. With the non-standard box model used by those IE versions the padding is included within the specified width and height of your content.

Let's look at an example so we can clearly understand how this works. Let's assume that we have the width of our content defined as 100 pixels, the padding as 10 pixels, the borders as 2 pixels and the margins at 5 pixels. With the standard box model this makes the total width of our element as 5+2+10+100+10+2+5 = 134 pixels. With the IE box model the padding is included in the width and so the element is 5+2+100+2+5 = 114 pixels. The standard box model provides wus with 100 pixels into which to fit our content (the width specified) while IE only gives us 80 pixels (width - padding). The same would happen with the height in those rare instances where you need to specify a height for your element.

So how can we rectify this and get all browsers using the same sized boxes? Well the easiest way if you don't need to support versiions of IE earlier than version 6 is to simply make sure that you have a doctype at the top of the page so that Internet Explorer uses the standard box model instead of its alternate one.

There are two ways to correct the box model for where you do need to support older versions of IE as well. The first is to use an IE conditional comment to supply a second stylesheet to the required IE versions that adjusts the width of the element so that it matches that used by other browsers. Overriding the width in our example so as to tell those IE versions that the width to use is 120 pixels instead of 100 will resize the box to match that used by the standard box model.

The other way makes a minor change to the HTML rather than adding a second stylesheet. The two box models are only different where we have both a width (or height) and paddding on the same element. So we can fix the problem by creating two elements instead of one. The inner element is given the width (and height) that we require (100 in our example) and a padding of zero. The outer element is defined exactly the same way that we would have defined it for the standard box model. Where the standard box model is used both the inner and outer elements have the same width and the outer element adds the padding, border, and margins around it. Where the alternative IE box model is used the inner element has the same width as the standard model while the outer one has a smaller effective width (since it wants to put the padding inside the width). It can't fit the bigger box inside the smaller one though and so the outer element is forced to be bigger than that specified in order to fit its content and thus ends up as big as it would have been in the standard box model.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow