:active css selector not working for IE8 and IE9
Solution 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 <- True for IE 6.:active
state to <a>
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.
Solution 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. =(
UrBestFriend
Updated on June 04, 2022Comments
-
UrBestFriend almost 2 years
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. -
BoltClock about 13 yearsPretty sure the spec doesn't say that
li
can't have an active state. -
easwee about 13 yearsAs I understand it if there is no active interaction with the element it won't trigger the :active state - I will make a test case for this.
-
UrBestFriend about 13 yearsIt looks like the icons is blocking the menu from being clickable. Is there a workaround from this?
-
BoltClock about 13 yearsHmmm, same results. Other browsers turn the
li
's bullet pink on activation, IE doesn't. Looks like yet another browser discrepancy. Golly. -
UrBestFriend about 13 years@aeswee thanks for this, is there a work around for this to work in IE? It seems this problem is only for IE
-
BoltClock about 13 years@UrBestFriend: Like he said, find a way to apply it to the contained
a
instead. -
UrBestFriend about 13 yearsThanks for the update, yup I also applied it to a and it works now. But a new problem arise: the icon now gets in the way of the click-able area. I've tried re-arranging the a to come before the icon but it messes the whole layout. Any idea on how to make the whole area clickable without messing the whole layout?
-
easwee about 13 yearsPut the arrow icon inside a or as background to <a>? <a> has to be a block or inline-block element in order for height property to work. Than just apply the same styles you had now on div (or li) to your a element. Maybe you're having problems beccause it is absolutely positioned or the z-index is higher?
-
UrBestFriend about 13 years@Thanks for the suggestion, however the icon still isn't click-able in IE. I think a has to be in front of the icon.
-
easwee about 13 yearsHumm dunno try experimenting a bit - it always worked for me - there are different aproaches in CSS - usually if one doesn't work try another one - atleast in the business it's like this since you cannot always afford the time to research indeep the problem.
-
UrBestFriend about 13 years@easwee I understand, but its already been 5 days... and the site isn't that even that complex hahaha I'm going crazy
-
UrBestFriend about 13 years@easwee btw thanks for the a background idea! It work, now just need to tweak the positioning XD
-
Shavais over 10 yearsI would argue that changing the color of an element, or something like that, while the user has the left mouse button held down on it, for things other than links, does not break any user expectation that is worth preserving. All the other browser creators appear to agree with me. I couldn't begin to count the number of times I've come across things that all the browsers do acceptably well, in the opinion of the majority, except IE. I keep hoping that will eventually change, but it was true 20 years ago, and it's still true today. My answer: Don't capitulate; do it with JavaScript.
-
ruvim almost 9 years
span:active + span
selector doesn't work in IE10 either. Note that simplespan:active
works. -
seemly almost 9 yearsThanks, @ruvim. Reply updated to reflect your confirmation of bug in IE10.