IE6 Multi-Class Bug

I’ve got a doosey to report. I recently stumbled accross an interesting and not very well documented IE bug. First let me show you the XHTML and CSS so you can be as stomped as I was. Say you have an icon that has its background changed depending on the site you are on. Say you put it inside an emptly div for some reason or another. The code would look something like this:

...
<div id="icon" class="notice"></div>
...

Simple, not very semantic, but it’s only for presentational purposes. You then set up you CSS so that the class of the selected div tells us wich background image to use.

#icon {
    width: 52px;
    height: 52px;
}

#icon.error {
    background: url(notice_error.gif) no-repeat;
}

#icon.notice {
    background: url(notice_info.gif) no-repeat;
}

#icon.success {
    background: url(notice_success.gif) no-repeat;
}

Looks about right, right? You check it in Firefox and everything is honkey dorey, that is, until you open it in IE (yeah, big surprise). It would seem that IE only knows how to show the first background image in the class list (in this case that is the error icon), and doesn’t load any other. You can view the bug in action here (obviously you have to open the example in IE to see the bug, just click on a couple of links).

After hours of looking for any explanation on the web, I found SonSpring’s post that described this very bug. The author came to the vary same conclusion and also included a simple workaround. All you have to do is not to target our #icon div directly using the id and classname (#id.classname notation), but to target it through it’s parent (#parent .classname notation), or to just omit the reference to the id completly. Simple, yet not very easy to spot. So thanks SonSpring for making my day a whole lot shorter :)