IE6 Multi-Class Bug

Why won't my cleverly written code work?

On a recent project I wrote some JavaScript to change the class assigned to a region so I could randomly set the background image by using different CSS classes.

In my style sheet, I had very explicitly set the styles using an #ID.ClassName combination. Well it didn't work in IE6 and it took a bit of investigating to find out why the following wasn't working for only IE6:

#UpperHome.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
#UpperHome.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
#UpperHome.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
#UpperHome.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
#UpperHome.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif))
     }

I had a simple JavaScript that would randomly assign one of the five classes to the <DIV id="UpperHome" >. It worked fine in FireFox, Ie7, and Safari. The only place it wasn't working was in IE6. IE6 would only render the default background image I had set elsewhere.

Luckily, I found that somebody else was having a very similar problem, (I wish I could remember the search tern I used in Google to find it):

• Sonspring.com: IE6 Multi Class Bug

It turns out that if you have a series of #ID.Class pairings in a style sheet, and at least one of those pairing does not exist in the page that is calling the styles, then none of the #ID.Class pairings are interpreted by the IE6 browser.

I think. It's been a while.

Anyway, removing the #IDs from the style sheets and simply using "just classes" resolved my issue.

The following working in IE6 (and all others) just fine:

.ProspectImg1 {
     background-image: url(http://yada.yada/.../imageOne.gif)
     }
.ProspectImg2 {
     background-image: url(http://yada.yada/.../imageTwo.gif)
     }
.ProspectImg3 {
     background-image: url(http://yada.yada/.../imageThree.gif)
     }
.ProspectImg4 {
     background-image: url(http://yada.yada/.../imageFour.gif)
     }
.ProspectImg5 {
     background-image: url(http://yada.yada/.../imageFive.gif)
     }

Reset Stylesheets

Ground Zero

A friend of mine pointed me to an article that talks about using Reset Stylesheets. It is a style sheet that sets a common base line for all browsers to build on. essentially, it gets rid of all the baggage and default style rules that are thrust upon the developer by the browser.

"Even the browsers with the most rigorous support for web standards have slightly different starting points for many HTML elements. It's true -- measure your page elements in Firefox, Safari and Opera with a ruler and you'll see each renders them in their own subtly different ways."

For more information, I suggest you read the full article:

• Webmonkey: Using Reset Stylesheets