...

View Full Version : css images rollover not working on IE



jabcka
05-09-2006, 08:57 AM
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;
}

_Aerospace_Eng_
05-09-2006, 08:58 AM
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.

jabcka
05-09-2006, 09:32 AM
Thanks
But now I have a dotted border when clicking the image - in FF.

Bill Posters
05-09-2006, 09:46 AM
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).

jabcka
05-09-2006, 10:30 AM
Thanks
Work great for me



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum