a:active issue in ie6

Question

I'm having some questions about changing the class/state of a link back to normal in ie6. I'm using a:active to change the background of a span when the user clicks on it. The target of the link is set to javascript:void(0), so clicking on the link just invokes a JS function I have. However, when the user releases the mouse button, the a:active state to be removed for the link, the background changed back to normal, but in ie6 it does not. It keeps the depressed background I've set in a:active.

Does anyone have any suggestions about how to fix this?

Thanks.

Answer 1

Try to use href="#" on IE6, I've had the same problem, using javascript:void(0) in most of the links and working fine on IE7 and FF, so running a js specifically on IE6 browsers replacing javascript:void(0) for # and it works now.

Answer 2

In IE6, "active" is sometimes analogous to "focused". The DOM object will remain "active" until another element receives focus, or it is blurred. If you add a JavaScript onMouseUp event to the link which calls blur(), it should release the active state when the user's mouse button releases:

<a href="whatever">Link!</a>
...
</body>
<script type="text/javascript">

    function handleMouseup() {
        window.event.srcElement.blur();
    }

    if(ie6) {
        var links = document.getElementsByTagName('a');
        for(var i=0;i<links.length;i++) {
            links[i].onmouseup = handleMouseup;
        }
    }
</script>

This will ensure you can use any href you want (javascript:void(0), #, whatever)