The Revenge of the IE Box Model?
The Revenge of the IE Box Model?


    

In December 1996 the W3C published CSS1, the first version of the
CSS spec.  It used this diagram to
define a 'box model' of progressively larger boxes surrounding the
content:


 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

         |    element width    |
|               box width               |



When Microsoft released CSS1 support with their new Trident
layout engine, it acted as if the spec had instead had:



 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

   |          element width          |
|               box width               |





Specifically, IE was treating width to include the border and the padding while
CSS1 treated width as including only the content.  This became known as the
"IE box model".




In 1998 the Web
Standards Project compiled a list of IE's
many CSS failings, including this one.  Every browser had CSS bugs,
however, so this wasn't particularly bad.  They made a similar list
for Opera and
declined to make a list for Firefox's ancestor Netscape claiming that
"trying to list the important bugs would be an exercise in writing
long documents".




Netscape died and was reborn as Firefox [1] with a new rendering engine.  Opera
fixed their bugs.  Apple took the KHTML
engine and built WebKit to power Safari.  Google
took WebKit and made Chrome.  Microsoft
fixed this in
IE6, but thanks to quirks mode
and the persistence of IE5, web developers still had to deal with IE's interpretation.




Occasionally
people would suggest that what IE was doing was actually better and the standard was flawed:



Logically, a box is measured from border to border. Take a physical box, any box. Put
something in it that is distinctly smaller than the box. Ask anyone to measure the width
of the box. He'll measure the distance between the sides of the box (the 'borders'). No
one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the *visible* width of the
box, about the distance from border to border. The borders, and not the content, are the
visual cues for the user of the site. Nobody is interested in the width of the content.



Or more practically:


Imagine you're creating a two column layout. The left
column should be 30% and the right 70%:

    .left{
        float: left;
        width: 30%;
        background-color: pink;
        border: 3px red dotted;
        height: 150px;
    }
    .right{
        float: left;
        background-color: lightgreen;
        width: 70%;
        border: 3px green dotted;
        height: 150px;
    }

    <div class="left">content-box</div>
    <div class="right">box-sizing</div>


If you add a border to either box, the total with of the elements will
be greater than 100% so the second box will be pushed onto the next
line.


This sentiment lead to a heavy
emphasis on correctness:


Regardless of which approach makes more sense to you, the correct element box model is
the CSS model, and that's the one used by IE6 when in standards mode.


Many
people still think the
IE version was better, and in fact CSS3 now
lets you specify you want to set the width including padding and the border:


box-sizing: border-box;



As Paul Irish suggests,
you can apply it site-wide with a '*':


* { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }





So was Microsoft right all along?  It's tricky.  If CSS1 had defined
width to include the border and padding from the start, it
would have been better.  It's nearly an arbitrary choice, and web
developers can work with either, but especially when working with
percentages an inclusive width is nicer.


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".




I don't like that this was more like a dominance game than engineering and design.





[1] Technically the new rendering engine, Gecko, predates the Phoenix
Firebird Firefox project.  When Phoenix 0.1 was released
in September 2002, Netscape had been using Gecko since November 2000's version 6.  By that
time IE was over 85% of
the web, though.

  
