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

Question

I want to style the :active state of a button that is represented by an <a> tag. The <a> tag has an inner <span> (beacuse I want to add an icon to this button).

I notice the :active state is triggered properly in everything but Internet Explorer 8. In IE 8, it appears that the area around the <span> (the <a>’s padding) triggers the :active state, but when clicking directly on the text within the <span>, the :active state is not triggered.

Is there a way to fix this without resorting to Javascript?

HTML

<a class="button" href="#">
 <span>Add a link</span>
</a>

CSS

a.button { some styles }
a.button:active { some other styles }

Answer 1

Maybe:

a.button span { ...
a.button span:hover { ...

would work?

Answer 2

Tricky: IE 8 doesn’t seem to register the <a> tag as active when the <span> is clicked. (IE 6 and 7 are both fine. You found a regression!)

It does, however, register the <span> tag as active. If you can apply all the styles you want to change for the :active state to the <span>, then IE 8 will play along, e.g.

a.button:active,
a.button span:active/* This selector is for IE 8 only */ {
    color: #009;
    font-weight: bold;
}

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

Any styles that only apply to the link won’t change in IE 8 though. In the example above, the text changes colour when clicked, but the underline does not, as the underline style is attached only to the link (via the browser’s default styles), not the <span>.

Answer 3

Alternatively, you could put the <span> outside the <a> instead. That seems to work.

HTML

<span><a class="button" href="#">
 Add a link
</a></span>

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

Answer 4

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.

Answer 5

Had exactly same problem today.

Try setting

z-index: -1; position: relative;

on the span.

This is what i came up with after reading this post.

I actualle wrote a long answer, with example code etc etc etc.. but while indent'ing css code, IE had a choke and crashed..

Answer 6

I came up with a solution that fixes the ie8 bug using jquery. Its an unreasonable use of resources for such a minor bug, but the app I was working on a the time was using a lot of jQuery already so it didn't matter.

HTML

<a href="#" class="btn"><span>Button</span></a>

CSS

a.btn:active,
a.btn.ie8:hover { /* <-ie8 hack */
    /* mouse down state a.btn style */
}

a.btn:active span,
a.btn.ie8:hover span { /* <-ie8 hack */
    /* mouse down state a.btn span style */
}

Jquery

$(document).ready(function() {

    var isIE8 = ($.browser.msie == true && $.browser.version == "8.0") ? true : false;

    if (isIE8 === true) {
        $("a.btn").bind({
            mousedown: function() {
                $(this).addClass('ie8');
            },
            mouseleave: function() {
                $(this).removeClass('ie8');
            }
        });
    }
});