Ie and the box model | WPDFD.com Forums

Maia said:

01/22/04, 022 04 2004 2004:%i:1074819889 20:04:49

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?


 <-- define width
 <-- define padding

Joe Gillespie said:

01/23/04, 023 55 2004 2004:%i:1074837337 00:55:37

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 said:

02/14/04, 045 09 2004 2004:%i:1076810951 21:09:11

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 said:

02/16/04, 047 00 2004 2004:%i:1076965241 16:00:41

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

Jdenny said:

02/16/04, 047 24 2004 2004:%i:1076970284 17:24:44

You apply it to the box in question, or, to apply to all boxes, get out your universal style sheet and do this:

html, body, div {
      -moz-box-sizing: content-box;
       box-sizing: content-box; 
}

add any other block level elements u want to the html, body, div.... list