with an inner not triggering :active state in IE 8

Question

I want to style the :active state of a button that is represented by an tag. The tag has an inner

Answer 1

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 2

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 3

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');
            }
        });
    }
});

Answer 4

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 5

Maybe:

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

would work?

Answer 6

You can fix it using this:

$('.yourspan').mousedown(function(){
    $(this).parents('.youranchor:first').css("background-position","bottom");   
}); 
$('.yourspan').mouseup(function(){
    $(this).parents('.youranchor:first').css("background-position","top");  
});