PDA

View Full Version : CSS Hover state doesn't works in FF not in IE

jrbamberg
02-23-2008, 10:00 PM
I'm new to CSS and I just got my design starting to look the way I want it to, but I ran into a problem with a CSS rollover. In FF the rollover in my nav works like any other rollover should, roll over and new image appears, roll out original image appears, but in IE when I rollover the image appears, but when I roll out the image sticks! Anyone have an suggestions?

website for visual - www.justinrbamberg.com

Heres my code:

#home { background-image: url(../images/home_normal.jpg); background-repeat: no-repeat; position: absolute; left: 300px; width: 63px; height: 102px; }
#home a:hover { background-image: url(../images/home_over.jpg); width: 63px; height: 102px; }
#home a{text-decoration:none; display:block; width:63px; height:102px;}

#about { background-image: url(../images/about_normal.jpg); background-repeat: no-repeat; position: absolute; left: 363px; width: 77px; height: 102px; float: left; }
#about a:hover { background-image: url(../images/about_over.jpg); width: 77px; height: 102px; float: left; }
#about a{ text-decoration:none; display:block; width:77px; height:102px; float: left; }

#port { background-image: url(../images/port_normal.jpg); background-repeat: no-repeat; position: absolute; left: 440px; width: 77px; height: 102px; float: left; }
#port a:hover { background-image: url(../images/port_over.jpg); width: 77px; height: 102px; float: left; }
#port a{ text-decoration:none; display:block; width:77px; height:102px; float: left; }

#contact { background-image: url(../images/contact_normal.jpg); background-repeat: no-repeat; position: absolute; left: 517px; width: 69px; height: 102px; float: left; }
#contact a:hover { background-image: url(../images/contact_over.jpg); width: 69px; height: 102px; float: left; }
#contact a{ text-decoration:none; display:block; width:69px; height:102px; float: left; }

Thanks - jrbamberg
harbingerOTV
02-23-2008, 10:05 PM
the order is:

(a)
a:link
a:visited
a:hover
a:active

so in your case swap the order of a and a:hover in your css.
jrbamberg
02-23-2008, 10:16 PM
that seems very simple, thanks.
jrbamberg
02-23-2008, 10:33 PM
Ok, that didn't work. I swapped my a:hover and a in my code and I still seem to be having the same problem. Any other suggestions.
harbingerOTV
02-24-2008, 12:31 AM
this seems to work:

#header #home {
position: absolute;
left: 300px;
width: 63px;
height: 102px;
background: url(http://www.justinrbamberg.com/images/home_normal.jpg) top left no-repeat
}

#header #home a {
background: transparent;
text-decoration:none;
display:block;
width:63px;
height:102px;
}

#header #home a:hover {
background: transparent url(http://www.justinrbamberg.com/images/home_over.jpg) top left no-repeat;
width: 63px;
height: 102px;
}
jrbamberg
02-24-2008, 03:31 PM
Ok that seemed to work great. The only other thing that it is causing is my images take a bit longer to load up and they shouldn't at 0.8 kb? Any idea why? But thanks on getting them to work correctly.
harbingerOTV
02-24-2008, 05:35 PM
I'm not seeing a delay, or maybe it's not that bad or I'm tired ;)

but add this to your <head>

<script type="text/javascript">
function fixIE6flicker(fix) {
try {
document.execCommand("BackgroundImageCache", false, fix);
} catch(err) { }
}
fixIE6flicker(true);
</script>


It might be IE's caching issue. Ths has fixed it for me in the past.
jrbamberg
02-24-2008, 08:13 PM
Thanks for all your help.