: active css selector not working for IE8 and IE9

Question

Here is my site . This is the last issue in a series of cross-browser discrepancies that I experienced and resolved through the community.

Basically, in Internet Explorer 8 and Internet Explorer 9, the styles :active do not apply to menus. When pressed, it should become darker. Please let me know why and how to fix it. Thanks in advance.

Answer 1

An active pseudo-class is applied while an element is activated by the user. For example, between times, the user presses the mouse button and releases it. See W3 documentation .

But you apply the :active selector to the <li> , element , which cannot have an active state, since it never gets activated - it just hangs. You must apply the condition :active to <a> <- True for IE 6.

UPDATE: Here is a test sample in jsFiddle , as you can see that it works fine on the <a> element, but not fine on the <li>

Interesting information I found here

An active pseudo-class is applied while the user selects a link.

CSS1 was a bit ambiguous on this behavior: the “active” link is the one that is currently selected (for example, by clicking the mouse button) of the reader. ”Also, in CSS1: active there were mutually exclusive: links and: Visited. (And there wasn’t: hover pseudo-class).

CSS2 changed the situation, so the rules for: active can be applied simultaneously with: visited or: link. And the behavior was a little explained: ": the active pseudo-class is applied when the user activates the item. For example, between times the user presses the mouse button and releases it."

IMO, FF and others are better CSS2 than IE. But since the link to download the new page is supposed, IE could legitimately state that 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 click a link, but the mouse from the link while holding down the mouse button. The link is not (new page not loaded), but the link remains in: active state. Chrome and Opera, on the other hand, deactivate the link, but at different times; Chrome, as soon as the mouse leaves the link area, Opera does not until the mouse button is released. IE behaves just like FF in this example. (Press Enter after dragging and clicking on the link, and you will see more differences in behavior.)

I would not call any of these differences “errors,” because of the ambiguity in the specification.

The only thing I can offer is accept that you cannot control every aspect of browser behavior. Users of different browsers have different behaviors, and if you start messing around with user expectations, you are on the wrong track.

Answer 2

Just for relevance and in order to save someone else from finding a solution, I also found a "mistake" in IE <= 10, where you cannot apply styles to the active child, for example:

 a:active img { position:absolute; top:-30px; } 

The above will not change the image position in IE <= 10, and in this case you will need to apply: active in the child element itself;

 a:active img, a img:active { position:absolute; top:-30px; } 

In most cases, this is not an ideal solution, since any text inside the anchor should have a higher z-index value than the image, which means that the image will change it only on the basis of a click on the image itself (giving the image: active state) ... which left me in slight binding, but not tied to anything (for css solution only).

So, although this is not a fix, it is more likely a “warning” note to others about crashes on: active pseudo selector in IE. Garbage. = (