CSS - image sprite :active not working ie

Question

Here is my code, which works perfectly in all but ie! The active simply does not fire

    a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}

a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

a.Button:hover span {
background-position: 0 -136px;
}

a.Button:hover {
background-position: right -90px;
}

a.Button:active span {
background-position: 0 -225px;
}

a.Button:active {
background-position: right -181px;
}

This is the html:

<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>

Any ideas please?

if you add another effect to the :active, such as a color change, does it fire in IE? — TH1981, Dec 31 '11 at 18:53

score 1 · Accepted Answer · answered Dec 31 '11 at 19:14

1

try changing a.Button:active to a.Button span:active in your css. That seems to be firing the :active css and still works in chrome for me.

answered Dec 31 '11 at 19:14

TH1981

3,105
7
42
78

this works to a degree, but, as this is a sliding door type class there are two halves to it - changed it to what you said and now clicking either half does work but does not fire both together - nightmare this – StudioTime Dec 31 '11 at 20:03

score 0 · Answer 2 · answered Dec 31 '11 at 19:22

Yep, the :active psuedo-class only fires in IE when the user is clicking directly on that object. In this case, the link. If you're clicking on a child object (the span), the link's active event won't fire.

You can, as Aninemity said, apply the style to span:active (the proper way to do this). But in IE6/7, :active fires only for links. If you need IE6/7 support, you'll have to find some way to get rid of the span.

CSS - image sprite :active not working ie

2 Answers2