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:

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:

Code:

#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>

Code:

<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.