Sliding Doors on Button - IE8 issue

HTML & CSS
1

I have this CSS:

a.LinkButton
{
background: transparent url('/Images/ButtonLeft.png') no-repeat top left;
display: block;
float: right; 
font: normal 12px Arial; 
line-height: 15px; 
height: 23px; 
padding-left: 9px; 
text-decoration: none;
margin-left: 5px; 
}

a:link.LinkButton, a:visited.LinkButton
{
color: #494949; 
}

a.LinkButton span
{
background: transparent url('/Images/ButtonRight.png') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; 
}

a.LinkButton:active
{ 
background-position: bottom left;
}

a.LinkButton:active span
{ 
background-position: bottom right;
}

and this HTML:

<a class="LinkButton" href="Whatever"><span>Button Text</span></a>

So, a pretty standard “sliding doors” technique to cater for varying text widths. In Firefox and IE7 (I’ve not been able to check IE6) it works as expected - if the mouse button is held down anywhere on the button, the image moves as expected.

BUT, in IE8, that only happens if the mouse button is held down on the left side of the button. If it’s held over the right side (actually more likely, as it’s bigger!) the graphic does not change.

Please can someone spot what I’m doing wrong?

Thanks, Nick

2

Thanks for the prompt answer Paul. It does indeed look like I have chanced across that bug.

Why “active” rather than “hover”? Well, my customer wants the button to highlight when the user clicks and not when the user hovers…

3

Hi,

It looks like its related to this bug. There doesn’t seem to be a solution either apart from using :focus (just for ie8) instead of :active but of course that leaves the element highlighted until focus is removed.

Why don’t you just change it to work on :hover instead of on :active.


a.LinkButton:hover span