Maia
Posts: 4

Is it worth it to use hacks to fix IE's box model problem, when adding padding to a nested div works great cross-browser and is less messy?


<div id="outer"> <-- define width
<div id="inner"> <-- define padding

</div>
</div>


Joe Gillespie
Posts: 528

IEs handling of padding can be a problem if you are using absolute widths and expecting a certain size, it's not so much a problem if you are using percentages or unspecified widths. Rather than using commenting hacks in the selectors, I prefer to just avoid using left and right padding where it could be a problem.

When I need padding, I put an inner div with left and right margins within the box that needs padding

or

you can have an outer box with a set width inside which is an inner box which has padding but no specified width so that it just takes up the width available.

I consider these workarounds, not hacks.

Top and bottom padding is not usually a problem, just left and right.

Jdenny
Posts: 65

Traditional model:
width / height specify dimensions from border to border.

W3C model:
width / height specify dimensions from inside the padding (the content edge).
e.g. border to border width = left padding + width + right padding.


Set Mozilla based and CSS3 compliant browsers to the traditional box model:
     -moz-box-sizing: border-box;
     box-sizing: border-box;

Set Mozilla based and CSS3 compliant browsers to the W3C box model:
     -moz-box-sizing: content-box;
     box-sizing: content-box;

Hitthosekeys
Posts: 10

Al Sparber's been posting on an effective (he calls it "bulletproof" method using MS Conditional Comments.

Check the pvii forums (link info at www.projectseven.com)--the post in question dates from Feb 8 and was in the css group, I think. (You'll need a newsreader to access this forum.)

I tend to use the "avoid feeding IE a fixed width" solution, but I'd like to understand the box-sizing method described by JDenny:

Do you apply these rules to the html tag, the body tag, the div box in question?

I've had a lot of legacy browsers to support in my own work, so I'm less familiar with CSS3.

TIA,

Lisa