CSS class selectors and IE6 - is there an alternative?

Get Started
1

Greetings!

I like doing this:



.nav-item {
   color:#000;
   text-decoration: none;
}

.nav-item.selected {
   color:#f00;
   text-decoration: underline;
}

Which lets me do things like this:


<a href="" class="nav-item selected">Home</a>
<a href="" class="nav-item">About</a>
<a href="" class="nav-item">Contact</a>
<a href="" class="nav-item">Log Out</a>

So that any .nav-item that also has class .selected gets a special selected style.

I really like the power of class selectors. It allows you to designate concepts for various purposes. just add ‘selected’ as a class of anything that needs a selected state and then style selected in context. It’s great.

But ie6 doesn’t support it!

I know only ~3% of users use IE6, and I would love to drop it, but within certain market segments, such as financial, it can be as high as 30%. So there are times when you need to support it.

IE6 cascades all .selected definitions within child scope together. I know I could just create original names for each selected state .nav-item-selected .subnav-item-selected.

2

One option would be to use JavaScript to add the necessary extra attributes into the page specifically for IE6. You can set it up so the JavaScript only runs in that browser. That way at least those with IE6 and JavaScript enabled would get the same as those using modern browsers. Of course IE6 is the one browser where there’s a good reason for turning JavaScript off but those still using it are those who are not very likely to do so (since there’s an even better reason why they should have upgraded to a better browser and they haven’t done that either).

3

never mind…

I see what’s happening. I just need to be more strict with my children!

4

Thanks for the reply. I was just about to start experimenting with rewriting javascvript for ie6. Specifically for the 24bit transparency bug. What would such an override entail for modding the way it treats css class selectors?

If I’m very strict with my child selectors I can prevent the problem above. I started on this issue after browser testing in ie6 and noticing that nothing was structured properly. .