Layout: Ie and the box model

started by Maia on Jan 22, 2004 — RSS Feed

Maia 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


Joe Gillespie 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


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 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 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 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.



Jdenny Jdenny
Posts: 65

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

You must login to reply