Schlueterica

I ran into an interesting CSS bug in MSIE 6 recently while coding up a dynamic portion of the new Yahoo! Games pages. I wasn’t able to find any information about it online, except for one message board entry from last year which was less than helpful. (This is the one that I mentioned yesterday.)

If you’d like to skip my analysis, feel free to go to the example page.

Let’s say that you have an element with an ID of “id.” You want to style this element differently based on its class. This could be because it has different classes on different pages, or, as in my case, you’re switching the className via javascript. Either way, you might set up your CSS like this:

#id.classOne { some styles… }
#id.classTwo { some different styles }

The problem is that, in IE, the second CSS declaration will not be applied when you swap the className.

I found that, for some reason, if you put the two declarations in two different style declarations, or in separate stylesheets, it will work just fine.

It’s interesting to note that, when you tell the document to spit out its CSS information, it returns different stuff in Mozilla vs. IE. In IE, the info gets switched around, so that the className is first, and the ID second. So, once the CSS is parsed, it looks like this:

.classOne#id { some styles… }
.classTwo#id { some different styles }

Either way, it should be completely valid CSS, and should be applied properly. But, for some reason, the IE CSS engine never applies the second rule — if they’re in the same styleSheet object.

So, how to get around the problem?

Well, I was using two different stylesheets. However, that got hairy, and fast. It wasn’t so bad when we had only two states, but then UED told me that we need a hover state, as well as normal and ascending/descending. So, three stylesheets… What happens when we want to style “ascending” and “descending” differently? Add a fourth? Ugh. The mark of a bad design is when you get that feeling that you’re going to have to keep tweaking it forever.

Since I was swapping out a background image, I changed things around. First of all, I set it up to use sprites instead of three separate images. Then, I set up rules to use a different background-position rule for .hover, .asc (ascending), and .desc (descending). The only thing that had to hang in the ID was thus the background-image, so I was able to get rid of any and all #id.className selectors.

Check out the example page, and compare the behavior of IE vs Mozilla (or any other browser, really.) Also note the way that the parsed CSS looks different in different browsers.