CSS :active pseudo class - target child elements in IE

Question

I'm making a fancy button that has hover and click effects. The button looks something like:

<a class="redB">
 <span class="a">&nbsp;</span>
 <span class="b">Email Us</span>
 <span class="c">&nbsp;</span>
</a>

My problem is in trying to access the three span elements in my css like this:

.redB:active span.a{background-position:0 -432px}
.redB:active span.b{background-position:0 -504px}
.redB:active span.c{background-position:0 -576px}

This works fine in FF and Chrome, but not in Internet Explorer :(

I'm also using this css for the hover

.redB:hover span.a{background-position:0 -216px}
.redB:hover span.b{background-position:0 -288px}
.redB:hover span.c{background-position:0 -360px}

And that works great in FF, Chrome and IE

Is there a way to get the :active class working like for child elements in IE?

Answer 1

Javascript Fix

You could try one of these, they claim to IE7 and force it to behave like a regular browser.

• ie7.js
• PIE

I'm not sure which version of IE you're referring to, but w3 has this to say about the :active pseudoclass:

Note. Also note that in CSS1, the ':active' pseudo-class only applied to links.

IE6, IE7 fail to properly support :active

Answer 2

Figured out a bit more,

IE was not doing the :active class for child elements because it was behaving as if the child elements were on top of the link, it would work, however if the link was clicked on its very edges.

In the future, I'll try to have simpler buttons as :active will work for the link itself, just not for child-elements within the link that IE treats as almost separate rather than part of the link itself, At least it does for the :active class.