What's really strange about IE6 is that even though it doesn't support combinatorial class selectors, our mutual exclusion technique still works. Now, I used to think that IE6 supported one level of class selection on IDs only, and that that was why this technique worked (we're not actually using combinatorial class selectors here). But upon further testing, it turns out that IE6 fails to do even that correctly.
Take the following css (which, should work just fine in any descent browser):
#someElement.classXYZ { background-color: green; }
What we're saying here is that the element whose id is "someElement" and whose class is "classABC" should have a background-color of orange, while that same element should have a background-color of green when the class "classXYZ" is applied.
Given that the mutual exclusion technique that this blog entry was written about actually does work in IE6, you'd certainly think that the above css would work as well, but alas… no dice.
Why? To be perfectly honest I have no idea. I have to imagine that this is just a major bug in IE6's css implementation.
What's even more strange is that if we have only one of the above style rules, IE6 will honor it. But as soon as we have more than one, IE6 craps out on all of them.
But believe it or not, it gets even weirder. If we have a slight variation of the above rule in which the rule is meant, not for #someElement, but rather for some child element of #someElement, then everything works as expected in IE6 (what the heck???).
The only good news here is that what I've just described is the exact css technique that we use for mutual exclusive link selection. Since this (strangely) does work in IE6, we can use it to our advantage.
It's just really important to know that this is most definitely an anomoly, and that, generally speaking, IE6's support for advanced css techniques is well… less than stellar (and that is putting it quite mildly).
But in this particular case, we're lucky that IE6 happens to do what we want. And what we want is a quick, easy and clean way to implement the visual representation of mutual exclusive link selection.
Hopefully, this blog entry has helped you add yet another weapon to your css arsenal. The technique has long been a favorite of mine, and I've found it to be very useful on many different occasions.
Comments welcome.