Nobody likes to be called a dummy by a dummy.

Browsers and the box model

I keep reading and hearing about the box model and how browsers implement it right or wrong.
I never really understood what that meant.

Can anybody explain to me:
1. What is the box model?
2. What is the problem with it?
3. Which browser does it right / wrong?
Permalink Geert-Jan Thomas 
August 3rd, 2005
The box model is related to specifying a container in CSS, giving it a width and some padding, etc. Fairly simple stuff. The standards says that padding goes *outside* the box, so a box with a width of 300px with 50px padding each side should have an effective width of 400. IE, in its infinite wisodm, puts the padding *inside* the box, so the box ends up only 300px wide, with a content area of 200px...
Permalink Mat Hall 
August 3rd, 2005
s/padding/margins -- how embarassing. :)
Permalink Mat Hall 
August 3rd, 2005
There are two kinds of renderable objects that affect layout so far as CSS treats it, the block and the inline elements. The box model describes how block elements (and inline elements within a box), are arranged before rendering.

In general the boxes are laid out top to bottom, left to right and CSS will attempt to fit boxes horizontally before vertically, so row by row. Individual block elements can be styled to change that order and alignment, the space between boxes can be defined and any margin between a box and the elements it contains can also be defined.

The important thing to realise is that boxes nest. The outermost box is the body of the document (so far as CSS for the document is concerned), in a simple document there may be no more nesting than the general tags <Hx> <p> and so on. As soon as you put a block tag within the extent of another block tag you've nested the one box within another.

In more complicated designs there will be a great many boxes to squish the layout of the page into the relative shape that's required, in strict CSS usage using <DIV> and in classic 1997 style using <TABLE>.

That's the standards definition of the box model. IE breaks that standard immediately because the <BODY> tag is not treated as a box at all, it just doesn't exist. So the first thing to do is to create a spurious <DIV> around all of the content. That single change fixes a great many of the simplest CSS alignment problems.

The second problem is that IE does not calculate the total size of a box correctly, or rather it takes the stated width as being the width of the box _including_ any margin and padding, whereas the standard defines the actual width of the box as padding+border+margin+width where width may be calculated by the content inside that box (including any other boxes).

That box sizing bug is the one we spend a reasonable amount of time working out how to fix and we fix it usually by having IE specific code in the CSS and using other IE css bugs to hide the standard code from IE.

There's a bunch of other bugs that make life more or less complicated for the cross browser designer, not having a max-height max-width for example, but they can be emulated using IE's expression engine.
Permalink Simon Lucy 
August 3rd, 2005
IE also doesn't have min-height, which is a true pain in the ass.
Permalink muppet 
August 3rd, 2005
"So the first thing to do is to create a spurious <DIV> around all of the content."

I noticed ASP.NET 2.0 does this by default.
Didn't understand why at first. Now I do.
Permalink Geert-Jan Thomas 
August 3rd, 2005
Mat: "how embarassing"

No better place to that but here ;)
Permalink Geert-Jan Thomas 
August 3rd, 2005
The important point to note is that if there was a version of IE that fixed its implementation of the box model and fixed it so that it was recognised as being standards compliant very little _if anything at all_ would need to be done to enable existing sites to work.

The blinker that some in the IE team have about backwards compatibility seem to be preventing them from getting on and doing the job properly. There is no appreciable problem with backwards compatibility if they implement quirks mode.
Permalink Simon Lucy 
August 3rd, 2005
And then people wonder why I still use tables for layout. I do it because its quick, its simple, and it works. I don't have to worry about (most) browser quirks. Of course, I'm not a graphic designer, and don't have to build sites that are very showy. Thank goodness!
Permalink Cory Foy 
August 3rd, 2005
Unfortunately, I don't think the IE team actuallt wilfully went the wrong way, I think the actual spec for this is extremely ambiguous. If you look at http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width which is the spec for the meaning of content width, for example, does it tell you whether "padding" is content, or not? IE decided that padding was outside content, others that padding was inside content.

What it comes down to is a poorly written spec... It was a matter of interpreting things as best understood, neither of them are specifically "wrong"...
Permalink Andrew Cherry 
August 3rd, 2005
Cory, what do blind people do when they use your sites?
Permalink Simon Lucy 
August 3rd, 2005
Simon, do you have a book? You explain this stuff very well.
Permalink son of parnas 
August 3rd, 2005
I have and perhaps I've dinned it into my head so much that if you press the button marked CSS it comes spewing out but its a general book on CSS, the IE specifics are from not only doing CSS only layout (and I don't do much layout at all), but convincing clients and whomever about the realities of layout and helping them fix cross browser problems.

The book is:

Cascading Style Sheets, Designing for the Web by Hakon Wium Lie and Bert Bos and published by Addison-Wesley.

It covers CSS 1.0 and CSS 2.0 and Hahon Wium Lie was the guy that original proposed style sheets at CERN.
Permalink Simon Lucy 
August 3rd, 2005
> Cascading Style Sheets, Designing for the Web by Hakon
>Wium Lie and Bert Bos and published by Addison-Wesley.

I meant do you have a book you wrote, unless you are H&#229;kon Wium Lie?
Permalink son of parnas 
August 3rd, 2005
Oh, no. Jeeze there's scads of them.

No, my only book to date is one on MS-DOS 1.25 and published so long ago I may become the next J R Hartley. (That is a British social reference that will mean absolutely nothing to anyone else).
Permalink Simon Lucy 
August 3rd, 2005
I suppose if you still have a copy of your book safely stored somewhere, you will avoid ever having to embark on that fictional character's quest.
Permalink Ian Boys 
August 3rd, 2005
I do, though how safe it is hard to judge. It certainly wouldn't be as useful still as Flyfishing, a definite historical curiousity.
Permalink Simon Lucy 
August 3rd, 2005
Although it's not *really* a historical curiosity, as the book and author didn't exist until after the ad...
Permalink Mat Hall 
August 3rd, 2005
I meant my book is an historical curiousity, entirely useless now other than as a marker for how useful it briefly was.
Permalink Simon Lucy 
August 4th, 2005

This topic was orginally posted to the off-topic forum of the
Joel on Software discussion board.

Other topics: August, 2005 Other topics: August, 2005 Recent topics Recent topics