The image stays put when I depress my mouse in IE9. I have to click an other part of the page to get it back up. Firefox and Chrome work fine (they put back the original image). Any ideas?
It even works here if I use IE9 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
But not if I create an html on my desktop and open it in IE9.
<html>
<head>
<style type="text/css">
#button{background:url("http://www.webstuffshare.com/wp-content/uploads/2010/03/button3.jpg") no-repeat 0 0;display:block;width:201px;height:67px;}
#button:hover{background-position:0px -67px;}
#button:active{background-position:0px -134px;}
#button span{position:absolute;top:-99999999em;}
</style>
</head>
<body>
<a id="button" href="#"><span>this is foo</span></a>
</body>
</html>
Your better off using js events as :active can behave unintuitively (similar issue; :active css selector not working for IE8 and IE9)
One way to bodge the behaviour you want would be to;
<a id="button" href="#" onclick="this.blur();" onmouseout="this.blur();"><span>this is foo</span></a>