: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 <- 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.
: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
CSS Opacity and Child Elements
Flex Auto Margin Not Working in Ie10/11
What's the Maximum Pixel Value of CSS Width and Height Properties
Display Image at 50% of Its "Native" Size
Styling Password Fields in CSS
First Letter Capitalize and Other Letters in Lower Case in CSS
Bootstrap Change Div Order with Pull-Right, Pull-Left on 3 Columns
Turning Off Twitter Bootstrap Navbar Transition Animation
How to Change CSS Validation Scheme in VS2010
Hover on Child Without Hover Effect on Parent
Pure CSS Multiple Stacked Position Sticky
Text-Overflow Ellipsis on Flex Child Not Working
CSS How to Make an Element Fade in and Then Fade Out
Word-Wrap:Break-Word Not Working in IE8
Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7
How to Watch Changes in Whole Directory/Folder Containing Many SASS Files