IE CSS Bugs That’ll Get You Every Time

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6′s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

The Box Model

This is perhaps the most common and frustrating bug of all in IE 6 and below. Let’s say you declare a box like this:

IE 6 will calculate the width of the box to be 100px.

Modern browsers will calculate the width of the box to be 124px.

This kind of discrepancy can cause HUGE layout problems. I even think the IE version makes a little bit more sense logically, but that is not how the spec was written. IE 6 can actually get it right if you are in standards-compliant mode, which is rare these days as just using an HTML 4.0 transitional doctype will trigger quirks mode and the box model problem.

I generally work around this issue by just not using padding on boxes I am using for layout. If that box has some text inside it in a <p> element, I’ll apply the padding it needs directly to that p element. Just side-steps the issue, but it works.

The Double Margin Bug

Using our box example from above, let’s say we need that floated to the right:

IE 6 will double the 20px to 40px. Again, causing potentially huge layout borks. The commonly thrown-around “fix” for this is to add “display: inline;” to the div. I’m not sure how this “fix” got so much traction, but its a bit impractical. We can’t set static widths on inline elements, now can we?

I also like to side-step this bug whenever possible. If you really need to push that box away from the right side of it’s parent element, you can likely do so by adding padding to the parent element, which is more likely to keep your grid consistent anyway. Also don’t forget about padding. This bug does not affect padding, so you can offen get away with adding padding to the side you need an achieve the same result.

No Min Widths / Min Height

Setting min-width and min-height on elements is such a natural and logical thing that it makes me tear up sometimes thinking I can’t count on them. IE 6 doesn’t just get it wrong, it just completely ignores them. Min-height is incredibly useful for something like a footer. Say your footer needs to be at least 100px tall because you are using a background image down there, but you don’t want to set a static height because you want it to grow nicely if, say, the text size is bumped up significantly. Min-height is perfect for this, but using it alone will get you no height whatsoever from IE 6. In a bizarre twist of luck, IE 6 treats the regular height property like modern browsers treat min-height, so you can use a “hack” to fix it. I call it a “hack”, because I don’t really consider it a hack since it validates just fine.

Stepdown

Normally when floating objects you can count on them lining up vertically until they break. That is, you could if you weren’t using IE 6. IE 6 appends a line break effect after each floated block element which will cause “stepdown”. The fix here is to make sure the line-height in the parent element is set to zero (0), or that the elements being floated are inline elements. More on preventing stepdown here.

No Hover States

Most modern browsers support hover states on just about any element, but not IE 6. IE 6 only support the hover pseudo-class on anchor (<a>) elements, andeven then you don’t get them if your anchor doesn’t have a href attribute. The solution here is to use a proprietary fix, or just deal with not having hover states on everything you want.

No Alpha Transparent PNG Support

Kind of funny that Microsoft themselves developed the PNG format, but their own browser doesn’t natively support it (until IE 7)*. I have a whole roundup of different fixes for this. Do remember that regular non-alpha transparent PNG files work fine without any fix in IE 6, and are often better than their GIF sisters.

*Update: I was totally wrong about the Microsoft thing, no idea how that got in my head. Tom Boutell actually developed the PNG format. Thanks all!

So…

All these bugs are either fixable or side-steppable, but they will get ya if you don’t do your testing. My general philosophy is: design with the most modern techniques possible, but then just make sure it ain’t busted in older ones.