Box mode, is it still broken in today's browsers?

Comparing IE, Firefox and Opera with an example.

[fischermx]

Hi,

I've read a lot of articles that deal with the wrong box model that IE has in version 5.x. I thought that was an old history and no longer aplicable and that I could rest assured that today's browser are all compatible.
Well, they are not.
I have the following code :

#content
{
width:795px;
margin:0px auto;
text-align:left;
padding:5px;
border:12px dashed #333;
background-color:#F5F5F5;
height:100%;
}

#mainContent
{
margin:3px 3px 3px 3px;
padding:2px;
background-color:#F0F0FF;
border-width:12px;
border-style: solid;
border-color: #330099;
float:left;
height:100%;
width:780px;
clear:both;
}

displayed as :
<div id="content">
<div id="mainContent">
</div>
</div>

Well, what I see is that IE, Firefox and Opera, all the three show different behavior.
IE nicely shows one box inside the other, with the proper paddings at the sides.
Firefox shows the proper margin between the boxes on the left, but on the right, the inner box edge is drawn directly over the outerbox edge.
Opera also shows this behavior, even pushing the inner edge slightly outside the outer edge PLUS, it shows the outer box, like 20 pixels smaller than what is shown in IE and FF, therefore exhibiting the same behavior as FireFox just in a slightly smaller area.

How can I get this two boxes to look the more similar in the three browsers?

[fischermx]

Measuring with a rule :
Opera shows the outer box at exactly 795px, as it is defined, however it fails in drawing the inner box.
IE give the outer box a width of 800px.
Firefox goes crazy with a width of 830px!
:( I'm stumped.

[CgiBin]

(please bear with me its 1:30 in the morning, and i shouldn't probably be posting, because I'm not an expert on the Box Model)...

IIRC,
IE places the margins and padding inside the total defined with of the box.

FireFox places the margins and padding outside the defined width of the box, thus the actual width is defined_size + (2 x padding) + (2 x margin) + (2 x border_width)

opera I have no clue as I don't deal with it :(

Also, I do belive that the way FF is the "correct" way according to the defined standard. I belive if you set the DocType to strict with a URL, it forces IE to use the "correct" box model, Otherwise by default it operates in "quirks mode" with the behavior you described.

[fischermx]

That did it!
Thanks a lot!

[Robin_reala]

Yep, it's a quirks mode problem. IE6 emulates IE5 if the doctype is removed (backcompat). Opera also emulates IE5 in quirks mode. Mozilla however always applies the correct box model regardless of whether it is in quirks or standards compatible mode.

[createErrorMsg]

IE places the margins and padding inside the total defined with of the box.

Very close.

The Quirks Box Model packs padding and border inside of the explicit width.

The Standard Box Model adds padding and border to the outside of the explicit width.

Both box models add margin to the outside of the explicit width.

cEM