:Active CSS Selector Not Working for IE8 and IE9

:active css selector not working for IE8 and IE9

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.

:active does not work in IE8

I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.

On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.

Edit

Here's my code...

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}

.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>

CSS selector :active not working on child element click in IE8

You could use a background image instead of a real image.

html:

<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
</div>
</div>

css:

.control
{
border: 1px solid #000;
background-color: #666;
height: 40+height-of-logopx;
background-image:url(logo.png); background-repeat:no-repeat;
background-position:20px 20px;
}

.control:active
{
background-color: #bbb;
}

CSS :active selector ignores the state of child elements in IE

One way you could do this is instead of using nested <img> tags, just use background-image. You can then just set the background-position so that the background-image is in the correct place, and then apply the styles you want to the li itself. For example, you could do this:

li {
border: 1px solid black;
margin: 10px;
padding: 10px;
float: left;
background-repeat:no-repeat;
background-position:10px 10px;
}

li:active {
background-color: rgba(0,0,0,0.8);
opacity:0.3;
}

I've used inline styles in that demo for the background-image and width/height styles, because I assume you'll want to use different images for each li.

This workaround may not work exactly the same as the original, but nobody said making your site work for IE was without cost.

css active doesn't do mouse release in IE9

Your better off using js events as :active can behave unintuitively (similar issue; :active css selector not working for IE8 and IE9)

One way to bodge the behaviour you want would be to;

<a id="button" href="#" onclick="this.blur();" onmouseout="this.blur();"><span>this is foo</span></a>

IE9 does not load css fully

Bit late but for future visitors of this thread: I had the same problem and found out my project just had gotten too big. IE9 stops reading your stylesheet after 4095 selectors.

For reference: Does IE9 have a file size limit for CSS?

submit input doesn't get the :active state in IE8 when I click on the button’s text

you can achieve this by applying input:focus to your input:active selector declaration:

input:active,input:focus{background-color:#000}

applying :active and :focus together are great for ui/ux/etc.... a lot of things.



Related Topics



Leave a reply



Submit