Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

Today, the Internet Explorer Box Model problem is mostly a non-issue. Most web developers place a <!DOCTYPE> tag to enforce standards compliance, and nobody really cares about supporting Internet Explorer 5.5 anymore.

However, some developers have come up with subjective, conceptual arguments in defense of the IE box model. They've claimed that the IE box model is more "intuitive" than the W3C model, because the W3C model measures the content of the box, whereas the IE model measures the box itself:

enter image description here

I can see their point of view, but it's basically a subjective argument, and the most important thing is standards compliance.

However, recently I've come to prefer the IE box model for serious practical reasons. The W3C box model makes it difficult to dynamically resize an element to the exact onscreen pixel width of another element. The reason is that the style.width property of an element doesn't account for the total onscreen size of the element: you also need to take into account any additional border and padding. This isn't a problem if both elements use the same CSS class - but if they have different CSS classes, this can become incredibly challenging.

Suppose we have two divs: A and B. A is hard-coded in the html as a 400px div, whereas B is dynamically created using Javascript. Visually, we want B to be the exact width of A. Under the old IE Box model, this is trivial. We simply say: B.style.width = A.style.width, or even B.style.width = A.offsetWidth + "px".

But with the W3C box model, this isn't so simple. Now we also have to worry about style sheets. If B has the same CSS class as A, we can just say B.style.width = A.style.width. But if it doesn't - and we might not want it to for aesthetic reasons - we're in trouble. Now we have to take into account the total pixels in the border and padding of both A and B. This can be particularly difficult if the border and padding are specified in inconsistent units (a common occurrence since border is often a 1px line, whereas padding might be specified in ems). Then we're faced with the quasi-impossible task of converting to a common unit (em to px or px to em). All of this just to get two divs to line up exactly on screen.

So basically, the W3C box model forces us to take into account CSS border and padding issues when we set the size of an element, whereas the IE box model doesn't, since the width measures the entire size of the box (end-to-end), rather than the content of the box. This makes it a lot easier to dynamically size elements in relation to each other.

All of this seems like a pretty powerful reason to favor the IE box-model over the W3C model (at least conceptually - of course in practice the IE box-model is dead).

Question: Why did the W3C choose this box model? Are there some advantages of the W3C box model that I'm simply not seeing? Or am I simply exaggerating the problem here?

share|improve this question
2  
Although I generally dislike the things IE does different, this argument is pretty interesting. –  FUZxxl May 7 '12 at 13:16
8  
you are really just highlighting the failure CSS in general has in describing layout, and yes IE really did have a better box model. –  Ryathal May 7 '12 at 13:26
10  
In case you don't know, you can now specify which box model to use in your CSS file. Use the attribute "box-sizing" and set its value to "border-box" if you want to use the IE box model. –  FishBasketGordo May 7 '12 at 13:44
add comment

1 Answer

The choice whether to include padding and border into the width or not was arbitrary. The only thing where it mattered was building multi-column layouts. However, you should pay into account the fact that people used tables for layouts at that time anyway. So to them that concern didn't seem important enough and they considered that being able to specify the exact width that the content itself would occupy in CSS seemed a lot more valuable.

For today's developers the situation seem totally different as they use CSS for layouts and they have to deal with CSS boxing model. Thankfully we've got an ability to override boxing rules so in most cases simple rule at the top of your stylesheet works fabulously:

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

To quote Jeff Kaufman on the subject:

Given that the spec defined it the other way, though, the signal it would have sent to Microsoft to adopt their misinterpretation would have been bad for the web. Microsoft was already using an embrace, extend, and extinguish approach, where they intentionally made products that acted differently from competitors' in order to lock users into the Microsoft versions. They came very close to succeeding with the web: from approximately 2000 to 2005 IE was so popular that many sites designed just for it. Adopting IE's approach here then might have told Microsoft "you can do whatever you want with IE and we'll adjust the standards to make it legal".

So box model fell the victim of power-struggling between W3C and Microsoft.

share|improve this answer
1  
I'd avoid a global override with *. I'd rather selectively override it in the places where its necessary. –  CodesInChaos May 8 '12 at 12:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.