css images rollover not working on IE

Hi

My rollover css works on FF but not on IE.
can someone help?


here it is:

<div class="rollover"><a onclick="s2fOpt(this)">&nbsp;</a></div>

the style:

.rollover a {
display:block;
width: 250px;
height:59px;
background: url("/i/s0.gif");
text-decoration: none;
}
.rollover a:hover {
display:block;
width: 250px;
height:59px;
background: url("/i/s1.gif");
text-decoration: none;

}
.rollover a:active {
display:block;
width: 250px;
height:59px;
background: url("/i/s2.gif");
text-decoration: none;
}

I think for it to work in IE there needs to be a href in the link
<a href="#" onclick="s2fOpt(this);return false">&nbsp;</a>
The return false is needed so the link doesn't go anywhere.

Thanks
But now I have a dotted border when clicking the image - in FF.

That's often referred to as the 'focus border'.

Try adding this to your css...
a[onclick*=s2fOpt]:focus {
outline: none;
}
(There is also a method to remove the focus border with js, but not without drastically reducing the accessibility of the link itself.)

If the element only performs a js function, you may well be better off not using an anchor element. Attach the onclick event to some other non-semantic, non-functioning element - preferably one placed on the page using js (to avoid giving users without js a dead, [un]clickable device).

Thanks
Work great for me