Like nearly every web designer and developer on the planet Internet Explorer has long been the bane of my existence. Each version consistently botches W3C specifications in some way, leaving out support for or mishandling technologies and features that other browsers have supported for years. Countless hours have been wasted creating browser check scripts, workarounds, and CSS hacks to support an outdated piece of software that many people still refuse to abandon despite obvious (and harmful) deficiencies.
There are, however, two things that Microsoft did correctly with Internet Explorer. The first is conditional comments, which allow knowledgeable web designers and developers to gracefully hide any CSS hacks or special IE code in simple HTML comments that other browsers ignore.
The second, and slightly less renowned, is the IE box model.
Understanding the box model can take a little effort if you aren’t already familiar with web design and development, so let’s use an example. We’re going to have a friend build a box for us, and it needs to be four feet wide exactly. We need exactly one foot of space around whatever it is we’re going to stick inside this box for padding material. And just for the sake of argument, let’s say that the box we’re building has really thick one-inch sides (it’s an awesome box).
Our box-building friend needs certain information from us to build this box, specifically the width, the padding (space between what we’ll be putting in the box and the box edges), and the border (or sides) of the box. We know that our box border is going to be an inch thick, and we want a foot of padding. We also know that the box has to be exactly four feet wide. How wide is the box?
If that looks like a trick question, you’re right. Anyone with any sense would say that the box is four feet wide. If we were to describe our box using CSS, it’d look something like this:
.box {
border: 1in solid;
padding: 12in;
width: 48in;
}
How wide is the box? According to the CSS specification, the box we just created is actually six feet and two inches wide. This is because CSS defines the total width of a box as the width plus the padding plus the border (48in + 12in * 2 + 1in * 2). To get a box that is exactly four feet wide, we actually need to do this:
.box {
border: 1in solid;
padding: 12in;
width: 22in;
}
As you can imagine, this is incredibly counter-intuitive. It also prevents us from doing cool things with relative dimensioning. Let’s try a more abstract example, shall we? We need two boxes this time, and like our last box we want a foot of padding around the contents of our boxes. They also need to have those one inch sides. We’re going to stick them into a storage room, and each box needs to take up exactly half of the width of the storage room. Unfortunately, we have no idea how large the storage room is going to be. All we can tell our box building friend is that each box needs to be half the width of the storage room (or 50%). How wide are our boxes?
Again, this probably looks like a trick question, and it is. Regardless of the size of our storage room, our boxes need to be exactly half as wide as the storage room, or 50% of the storage room width. If we were to describe these boxes using CSS, they might look something like this:
.box1,.box2 {
border: 1in solid;
padding: 12in;
width: 50%;
}
But wait! We already know that CSS determines the total width of a box by adding the width, padding, and border together. That means that these boxes are actually half the width of the storage room plus another two feet and two inches. This is also where the CSS spec fails us, as there’s no way to figure out what the actual “width” of these boxes without knowing the exact width of the storage room.
This is also where the IE box model steps up to the challenge. The IE box model is actually a rendering bug, one that has resulted in at least a few CSS hacks to alleviate. It also makes a lot more sense than the CSS spec, however, because when we tell Internet Explorer that the width of the boxes is fifty percent it assumes we mean the total width. Any additional padding or borders are subtracted from this width, not added to it. With the Internet Explorer box model, we can get exactly the boxes we need, regardless of the size of our storage room.
All modern browsers (including IE8, shockingly) support a “box-sizing” property of some kind that allows us to us the IE box model for creating boxes. Ironically enough, the only browser that doesn’t support “box-sizing” is Internet Explorer 7 and below. And unfortunately, the IE box model bug was corrected in Internet Explorer 6 (previous versions are essentially always stuck in Quirks Mode). So what if we want to use this more flexible, intuitive way of creating boxes in more recent versions of IE?
The answer is Quirks Mode. It’s actually really easy to get Internet Explorer 6 into Quirks Mode; including anything before the DOCTYPE declaration will do it, and the XHTML specification states that an XML prolog should be included prior to the DOCTYPE declaration. By sticking this simple, completely valid line of code into our documents, IE6 switches over to Quirks Mode and we get the desired box model.
Quirks Mode also “corrects” a number of other IE rendering issues. In fact, by forcing Internet Explorer into Quirks Mode, we’re essentially limiting our design and development needs to only two browsers: standards compliant browsers and legacy (Internet Explorer) browsers. Quirks Mode has it’s own set of, uh, quirks, but overall it’s much easier to correct for these than to spend hours implementing various hacks that may or may not break with the next version of Internet Explorer.