http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
To avoid problems with the IE5 Win border box model I have for years just been using the technique below automatically. I'm so used to using this method I'd actually forgotten why it was I did this in the first place. So I looked it up and what I was doing was to support IE5 Win! (Or IE6 in quirks mode - which it will never be because I always use a correct doctype).
Nesting Boxes Method For Avoiding Box Model Hacks
"One solution to the box model problem is to not assign padding or border to a DIV to which you have assigned a width. If you don't need a border effect, you can get your padding by simply setting margin or padding on all the box elements (DIVs, Ps, BLOCKQUOTEs, etc) contained with the DIV. If you need a border, simply nest a DIV within that DIV, do not assign it a width (it will fill up its parent DIV), and assign a border to the nested DIV."
Or more simply "...avoid specifying both width and padding or border for the same element. This ensures that all browsers will use the same total width, no matter which box model they use."
So, if you now make sites with the sentiment of 'fuck you IE5 Win you dont even exist' which alot of people are doing now, you can stop thinking 'padding is evil'.
A reminder, the padding/borders were only evil on a div with a stated width. Theres no problem if the div is auto width. Again I was so used to padding / borders being evil I was avoiding them everywhere in favor of margins.
It is archaic and time consuming to be going to all this extra effort of putting margins on all your little contained elements just for IE5. Or special hack values in your CSS. Instead use padding and borders to the W3C spec, and then if your project really does require IE5 support (lots of users who are old, poor, underfunded etc), add an IE5 only stylesheet using conditional comments, and in that, make the width of your divs be = (width+left border+right border+left padding+right padding).
One thing I just realised when writing that was that not having padding / borders on fixed width divs in the past made making layout size calculations alot simpler. All I've had to remember using the nesting method is margins+width, which simple to calculate.
But if Im switching to using padding and borders on my fixed width divs in the future, the calculation becomes: WIDTH MY DIV TAKES UP =
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. Thats heaps of values to think about! And some times people like to have their text padding in ems so it relates to their font size, so if that is the case, then calculating the width your div takes up becomes tricky, how do you add a pixel and an em?So depending on your situation, it could turn out to be better to keep doing the old nesting method on some layouts. But its nice to know you don't really have to anymore.
Posts
