The Internet Explorer 5 Box Model

Note: Relevance of the Internet Explorer 5 Box Model

This topic is included mainly for a historical reference, as Internet Explorer 5.5 and earlier versions have less than 1% market share today. However, Internet Explorer 6 and 7, and Internet Explorer 5 for Mac, all use this box model when they’re operating in quirks mode, so the topic still has some relevance today.

In the CSS box model, as defined by the CSS2.1 specifications, an element ascertains its total dimensions by adding together the content area dimensions plus any margin, padding, or borders that may have been declared. Conversely, if we use the Internet Explorer 5 box model (the IE5 box model for short),1 padding and borders will shrink the content area’s dimensions instead of increasing the element’s total dimensions.

To demonstrate, the following rule sets several properties that affect the dimensions of .box elements:

.box {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;
}

The total size of the element, using the IE5 box model, will be calculated as follows:

Total width = 200 + 15 + 15 = 230px (width + margins)
Total height = 150 + 15 + 15 = 180px (height + margins)

It follows that the available content area is reduced, because padding and borders have to be subtracted from the dimensions that were declared. The available content size, using the IE5 box model, would be calculated as follows:

Available content width = 200 - 10 - 10 - 1 - 1 = 178px
Available content height = 150 - 10 - 10 - 1 - 1 = 128px

Compare this with the dimensions for the correct box model in Table 1, and you can see that this method of calculation will make a considerable difference to the element’s size.

Table 1. Box Model Dimensions
  Standard Box Model IE5 Box Model
Available content width 200px 178px
Available content height 150px 128px
Total width required 252px 230px
Total height required 202px 180px

The size difference can be seen clearly in Figure 1.

Figure 1. The size difference between box models An illustration of the difference between the IE5 box model and
        the standard box model. The dimensions of the boxes are clearly
        different; the IE5 box model box is smaller.

The fundamental differences between these two box models means it’s important that you understand and are aware of both models when you’re creating code. Internet Explorer for Windows 5 (including 5.5) uses the IE5 box model at all times, but Internet Explorer 6 and 7, and Internet Explorer 5 for Mac, use it only when in quirks mode.

You may well be wondering why two box models exist. To answer this question, we need to travel back in time to the creation of Internet Explorer 5 for Windows, when Microsoft decided that the box model would contain borders and padding within the stated dimensions, rather than increasing them. This approach wasn’t as silly as it may seem at first glance: in cases in which you have an element with a width of 100%, the IE5 box model allows you to add padding and borders safely. Compare this to the correct CSS box model, in which you cannot add any padding or borders to an element with a width of 100% without breaking the layout.

Although the IE5 box model appears superior in this example, the correct box model is more useful in nearly all other cases. No other browser implemented the IE5 box model, and Microsoft eventually complied with the CSS standards and corrected its box model implementation in Internet Explorer 6 (when in standards mode). Before that, though, there was a long period in which CSS authors were forced to deal with two competing box model implementations—a situation that explains why so many CSS hacks were created.

As the IE5 box model had some merit, it has been proposed that CSS3 will provide authors with the choice of specifying which model to use via a box-sizing property. Firefox, Opera, and Safari have all implemented versions of this property, which you can read more about in -moz-box-sizing.

Footnotes

1 Although we’re calling it the IE5 box model, it’s also known as the broken box model.

User-contributed notes

ID:
#1
Contributed:
by LavernGingerich
Date:
Wed, 21 Oct 2009 17:54:25 GMT

I just want to thank you for posting this article and other valuable resources on this site. This article was very helpful to me.

Related Products