Anchor with span insite - in IE9 doesn't working [duplicate] - css

Question

Here's my site. This is the last problem of a series of cross-browser discrepancies I've experienced and solved thanks to the community.
Basically, in Internet Explorer 8 and Internet Explorer 9 the :active styles are not applied to the menu. It should turn darker when pressed. Please let me know why and how to fix. Thanks in advance.

Answer 1

The :active pseudo-class applies while
an element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it. See W3 documentation.
But you are applying your :active selector to your <li> element, which cannot have an active state since it never really gets activated - only hovered. You should apply :active state to <a> <- True for IE 6.
UPDATE: Here's a test sample at jsFiddle as you can see it works ok on <a> element but not ok on <li>
Interesting info I found here
The :active pseudo-class applies while
a link is being selected by the user.
CSS1 was a little ambiguous on this
behavior: "An 'active' link is one
that is currently being selected (e.g.
by a mouse button press) by the
reader." Also, in CSS1, :active was
mutually exclusive from :link and
:visited. (And there was no :hover
pseudo-class.)
CSS2 changed things so that rules for
:active can apply at the same time as
:visited or :link. And the behavior
was explained a little better: "The
:active pseudo-class applies while an
element is being activated by the
user. For example, between the times
the user presses the mouse button and
releases it."
IMO, FF et al comply with CSS2 better
than IE. But since a link is supposed
to load a new page, IE could
legitimately say the link is still
"active" while the new page is
loading, which is what happens.
You can see a similar
counter-intuitive behavior in FF by
clicking the link, but moving your
mouse off of the link while holding
the mouse-button down. The link is not
activated (a new page is not loaded),
but the link remains in the :active
state. On the other hand, Chrome and
Opera de-activate the link, but at
different times; Chrome as soon as the
mouse leaves the link area, Opera not
till the mouse button is released. IE
behaves the same as FF in this
example. (Hit enter after dragging
your mouse off the link, and you will
see more differences in behavior.)
I would not call any of these
differences "bugs", because of
ambiguities in the spec.
The only work-around I can offer is to
accept that you can't control every
aspect of browser behavior. Users of
different browsers have differing
expectations of behavior, and if you
start messing with user expectation,
you're on the wrong path.

Answer 2

Just for the sake of relevancy and to save anyone else the hassle of searching for a solution, I also found a "bug" in IE <= 10, where you cannot apply styles to an :active child, e.g;
a:active img {
position:absolute;
top:-30px;
}
The above won't change the position of the image in IE <= 10, in which case you would need to apply :active on the child element itself;
a:active img,
a img:active {
position:absolute;
top:-30px;
}
Which in most cases isn't a perfect solution as any text inside the anchor needs to have a higher z-index value than the image, meaning that the image will only change it's position based on clicking the image itself (giving the image the :active state)... which left me in a minor bind, but a bind none-the-less (for a css only solution).
So although this is not a fix, it is more of a note of "warning" for others about the downfall to the :active pseudo selector in IE. Rubbish. =(