IE6 multi-class bug
Note: If you're looking for an easy fix, try using IE7.js — now up to IE9.js.
When developing a site for a ministry recently, I noticed a rendering problem with Internet Explorer 6 on Windows (big surprise). After talking it over with Chris from ParticleTree, we both concluded that (to our knowledge) this had not yet been documented. So, the purpose of this article will be to explain what I am calling the IE6 Multi-Class Bug, for lack of a better term. In essence, it is the failure of Internet Explorer to render backgrounds for elements that have both an ID and a Class defined.
Normally, this is not a problem, but for the site I was working on, I had defined a <div> with the ID photos and gave separate class names based on which section of the site you were on. So, I had the typical names about, contact, welcome to correspond with the various section names. I looked at it in Safari and Firefox and there were no problems. Then, I fired up IE6 to have a look, and noticed that the welcome page did not work.
I clicked around through the site, and noticed that none of the photo <div> backgrounds loaded, except for the one on the about page. Puzzled, I went to my CSS to try to find the source of the problem. Since I've recently started alphabetizing all of my CSS files, #photos.about appeared first, before all the other site-section names. After showing this to several web designer friends, we were all stumped as to the cause of the error.
Finally, I realized that this was some sort of parsing/rendering error in IE6. It was going through the list of #ID.class for the photos <div>, but only applying a background to the first one, about. For all the rest of the classes that were applied to the same ID, IE6 simply skipped over them, failing to render the distinct backgrounds for each page.
The fix was simple, as all I had to do was remove #photos from each class, and simply have the class names defined in the CSS. While this is not a revolutionary finding, it is certainly one that could potentially cause headaches for web designers. So, I thought I would give everyone a heads-up, so that you are aware of this potential snag. I have also made mention of it on the IE7 Blog, so hopefully it will be fixed in the future release.
For an example of what this bug looks like in action, check out this page I have set up as a demonstration: IE6 Multi-Class Bug.