IE hover/focus/active anchor and span, no javascript

Question

Hi there,

currently trying to create the best anchor with background image, hover and active stages. Here is what i have for this moment. It works fine in all browsers except in IE if I press on span (15px left side works fine as it is anchor). Here is example link text . Any ideas? I want to keep current code, no absolutes, no javascript. I can add CSS property as span:active or focus, but that way cant change anchor's background-position.

Here is HTML code:

 <a href="#" title="Lorem ipsum noster"><span>Lorem ipsum noster</span></a>

Here is CSS code:

a {float: left; padding-left: 15px; background: url(i.png) no-repeat -285px 0; text-decoration: none; color: grey; cursor: pointer; overflow: hidden}
a span {float: left; height: 24px; line-height: 22px; padding-right: 30px; white-space: nowrap; background: url(i.png) no-repeat 100% 0; margin-right: -15px;}
a:hover {color: black}
a:active, a:focus {background-position: -285px 1px; color: red;}
a:active span, a:focus span {background-position: 100% 1px; color: red; line-height: 24px;}

Lets see what you know :)

Answer 1

It appears IE doesn't understand rules for children of an element with :active. However you can apply this pseudo-class to <span> which will work on IE > 7.

I'm searching an issue for IE < 8 ^^