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?

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