Forum Moderators: not2easy
In that case, wouldn't one way around the IE 5.x box model problems be to apply a margin and a width, instead of padding and a width?
Some people use two nested divs, one with margin, the other with padding.
See this W3 diagram [w3.org] for a visual.
All three (margin, padding, border) are added to the box width in compliant browsers, and subtracted from the box width in IE.
Is that correct? I'm no expert so I may be misunderstanding this or my source may be incorrect but at [positioniseverything.net ] they say that IE5.x includes the content, padding and borders in its width calculations but not the margins.
Also according to them, IE6 in 'Standards mode' (with a 'Standards' Doc Type declaration like Transitional - loose.dtd) will adhere to the standard box model as used by Opera and FF. IE5.x can easily be fixed using the Tan hack. So if all this is true surely we don't have a major box model problem if we can force IE6 into 'standards' mode? We code our CSS to the W3C standard and use the Tan hack for IE5.x (ignoring NN4/IE4) - job done?
I'm bound to be missing something major but I'd appreciate knowing what!
The only thing I would change is to add that for my money there are better "hacks" (perhaps we can call them "techniques" :) ) to use.
By the way, here's [redmelon.net] a rotating 3D diagram of the box model.
[edited by: photon at 5:17 pm (utc) on Oct. 21, 2004]
However, margin clearly does affect the calculated width of a box. try this...
<html>
<head>
<style type="text/css">
#wrapper{
float: left;
width: 400px;
background: white;
}
#box1{
float: left;
width: 200px;
height:100px;
background: blue;
}
#box2{
float: left;
width: 200px;
height:100px;
background: yellow;
/*margin: 0px 10px;*/
}
</style>
</head>
<body>
<div id="wrapper">
<div id="box1">Lorem ipsum dolor sit amet.</div>
<div id="box2">Lorem ipsum dolor sit amet.</div>
</div>
</body>
</html>
Load it in IE or FF (since there's no doctype, it'll throw them into quirks mode and display the same as it would in IE5.x). You'll see that the yellow and blue boxes float side by side.
Now uncomment the margin property in #box2. The yellow box now moves below the blue box. Why? Because there isn't enough room in #wrapper for two 200px wide boxes PLUS 20px of margin.
I suspect they say margins are left out because a margin exists outside of the border, and common sense tells us that a box ends at it;s borders. But clearly margin has an effect on the IE box model problem and must be factored in when calculating box widths for a layout.
However, if you've got a server farm, you're going to need a "margin" between them for air circulation/heat dispersion. Even though the dimensions of the cases haven't changed, you're going to need more room for them.
Ain't analogies grand? ;)
Load it in IE or FF (since there's no doctype, it'll throw them into quirks mode and display the same as it would in IE5.x).
If I were right, and margins were stuffed into the Quirks box model, the example I give in post 7 would only exhibit the stacking behavior in compliant browsers. But with no DOCTYPE, that example ought to be throwing IE6 into Quirks mode, which would pack the margin inside of the box and NOT cause the stacking.
The fact that IE6/Quirks stacks the boxes seems to prove that margins are added to the outside of a box no matter what box model is being used. Which was rich_b's point all along (I think).
So I was wrong: while it IS necessary to allow for margins when widthing your boxes, it appears this allowance must be made for all browsers, even the ones with the broken box model.
createErrorMsg - that's an interesting example you posted there. Unfortunately my brain just exploded after trying reading all the posts again. I shall try again later to get my head around all of this!
. Setting any horizontal (left or right) padding or border on any element on which you have declared a width setting.
. Setting any vertical (top of bottom) padding or border on any element on which you have declared a height setting.
These points are not particularly restrictive.
If you want a border on an element where you have declared dimensions, put it inside another element that just has border declared but no dimensions. It will 'shrink wrap' the inner element giving the desired effect.
If you want padding on element where you have declared dimensions, put another element inside it that just has padding declared but no dimensions (as mentioned by photon). It will be pushed out by any elements it contains, giving the desired effect.
Minus point:
. Extra HTML elements which exist solely for layout instead of content.
Plus points:
. No hacks
. No need to maintain two sets of dimensions for different browser models
. No more worrying about the box model - it ceases to be an issue. :)
Here's a newer one that comes very close to a universal cure: [webmasterworld.com...]
Personally, I just write code that validates, check it in FireFox, and tweak for IE. My layouts are generally fairly simple (I like to think of them as "clean" :) ), so I've rarely had need of a hack. The most I've ever done is use the technique jetboy_70 has described.
