<A> with an Inner <Span> Not Triggering :Active State in Ie 8

a with an inner span not triggering :active state in IE 8

Right, terribly over-complicated solution (and still imperfect), but: if you don’t wrap the link text in the <span>, and instead just use the <span> as a place to put your background image and position it absolutely within the <a>, then the <span> (mostly) stops blocking the :active state.

Test page: http://www.pauldwaite.co.uk/test-pages/2769392/3/

HTML

<a class="button" href="#">
<span></span>Link
</a>

CSS

<style type="text/css">
a.button {
    position: relative;
    padding: 10px;
    color: #c00;
}

a.button:active {
    color: #009;
    font-weight: bold;
}

a.button span {
    position: absolute;
    top: 50%;
    left: 3px;
    margin-top: -2px;
    border: solid 2px #000;
}
</style>

Of course, the area that the <span> covers still traps the click event, so when the user clicks on there, they won’t see the :active state. It is a slight improvement on the previous situation.

Anchor with span don't apply :active effect on IE

You can fix this using a pseudo-element for the a-element which is positioned right on top of it:

a {
  position: relative;
}
a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

The drawback is that you can't select any text inside the a-element.

Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don't want to use Javascript …

: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>

: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.

Style a a href as a button

This may be because the CSS selector is backwards:

Change:

a:active.button {

a.button:active {

Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.

a.button {  color: #444;  border: 1px solid #ababab;  cursor: default;  padding: 0 5px 0 5px;  text-decoration: none;}a.button:hover {  background-color: #cde6f7;  border: 1px solid #92c0e0;}a.button:active {  background-color: #92c0e0;  border: 1px solid #2a8dd4;}

<a href="#" class="button">    <span>Yes</span></a>

<A> with an Inner <Span> Not Triggering :Active State in Ie 8