CSS hack for IE6 and IE7

Posted August 15th, 2009 in HTML and CSS

A couple of days ago I was having some very minor layout issues in IE6 and IE7 when trying to fit some form controls into an exact sized box. All other browsers and versions rendered the layout the same except for IE6 and IE7 so I needed a CSS hack which would work in those two browsers only.

Internet Explorer Market Share

For the particular site I'm working on, 13% of the visitors use Internet Explorer 6 and 29% use Internet Explorer 7. It's an e-commerce website and while the minor layout issues aren't going to result in loss of sales that's a significant number to have something not looking quite right, so it's significant enough to need a work around.

Conditional Commenting

I generally find my layouts work fine in all non-IE browsers with my CSS rules, and IE from 7 up with no issues. It's usually only IE6 that I have issues with so have an IE6 specific style sheet which is used using Internet Explorer's conditional commenting.

Read my earlier Using Internet Explorer Conditional Tags for Style Sheet Selection post for more details about this.

I already had a specific IE6 style sheet to add to fixes and workarounds for that browser and didn't really want to have another one specific to IE7, especially when there only needed two things fixing... so roll out the...

Star *hack

The following will affect IE prior to IE8 only, and no other browsers. I'm not sure if it also works in IE5.5 and earlier as I haven't tested that version because I don't care :)

This example would make the background color of the element blue in IE6 and IE7, but in no other browser:

#example {
    *background-color: blue;
}

This will fail validators (at least it does with the W3C CSS validator); this may or may not be an issue for you.