Internet Explorer vs. CSS

October 5, 2004 1:59 PM

What's your preferred method for dealing with IE's less-than-stellar CSS box-model interpretation (specifically, where it adds padding to DIVs). Currently, I am using 2 divs, the outside one has the "width" attribute set, the inner one the padding. Works, but is kind of clunky.
Do you have anything simpler or more elegant?
posted by signal to clothing, beauty, & fashion (6 comments total)

One div with different rules for IE and 'good' browsers:

div {
width: 200px !important; /* for good browsers */
width: 180px; /* for IE Windows */
padding: 10px;
}

Explorer ignores !important and so applies the 180px width. Gecko agents (Firefox, Mozilla, etc.), webcore/webkit (Safari, Omniweb, NetNewswire), and Opera honor !important, so they don't apply the later value for width.

Cleaner than some other hacks, and is future-proof assuming that Explorer's box model and parsing errors get fixed in the same release.
posted by nathan_teske at 2:32 PM on October 5, 2004

Here's my methodology, it works for me:

I shove IE6 into quirks mode, which means it reads CSS roughly the same way as IE5 does. This way the box models are the same. This is achieved by setting this as the first line of your HTML file:

<?xml version="1.0" ?>

Next, anytime I have to adjust for the IE box model, I use the underscore hack. I love this hack cause it isn't removed from the flow of the CSS -- the hack is immediately after the correct declaration so it's easy to A) remember it's there, B) remember to change it when the other changes. This is the underscore hack:

div.className {
width: 90px;
_width: 100px;
padding: 0 5px 0 5px;
}

Everything but IE ignores the underscored declaration.

I've been finding I can get away with just this technique 95% of the time, browsers are falling into place nicely.

On preview: IE *does not* ignore the important declaration. Please see number 4 in this blog entry by Tantek for more info.
posted by o2b at 2:40 PM on October 5, 2004

Doesn't IE 5 simply fail to render padding?

Other than that concern, I really like your method, o2b...
posted by weston at 3:48 PM on October 5, 2004

One small caveat, shouldn't it be:

width: 90px;
_width: 80px;

posted by signal at 4:35 PM on October 5, 2004

IE5 does render padding, but incorrectly. The specs state that padding is *added* to the width of a box, whereas IE renders padding *within* the width of a box. So, a 100px wide box with 10 (total) pixels of vertical padding ends up (visually) being 110px wide in Mozilla (and IE6, when not in quirks mode).

The same box in IE5 remains 100px wide, and the content area of the box becomes 90px wide.

I've always preferred the incorrect method, I'm not sure I understand the reasoning behind the specs, but that's neither here nor there.

Signal -- The original example is correct. This is how I approach it: I measure an object in Photoshop, and that's the width I give to IE. I then subtract from that the padding I want to give the object, and that's the width for everything else.
posted by o2b at 7:57 PM on October 5, 2004

I have always liked Little Boxes.
posted by Yelling At Nothing at 8:57 PM on October 5, 2004