Rollover navigation buttons

HTML & CSS
1

Hi All,

I’m having a few issues with creating the rollover buttons for my web site www.auroraandpaolo.co.uk.

It seems that in Firefox and Safari the navigation works fine but in some versions of Internet explorer the navigation has a strange overlapping effect when you hover the mouse over it. Any ideas why this is?

The CSS I am using is:

#navigation {
	background: url(navbackground.jpg) no-repeat;
	height: 484px;
	width: 182px;
	margin: 0px;
	margin-left: -8px;
	padding: 0px;
	position: absolute; 
	top: 90px;
}

#navigation span {
	display: none;
}

#navigation a {
	height: 35px;
	display: block;
}

#navigation li {
  list-style-type: none;
}

#li1 { width: 182px; }
#li2 { width: 182px; }
#li3 { width: 182px; }
#li4 { width: 182px; }
	
#li1 a:hover {
	background: url(navbackground.jpg) -182px 0px no-repeat;
}

#li2 a:hover {
	background: url(navbackground.jpg) -182px -35px no-repeat;
}

#li3 a:hover {
	background: url(navbackground.jpg) -182px -70px no-repeat;
}

#li4 a:hover {
	background: url(navbackground.jpg) -182px -105px no-repeat;
}

#li5 a:hover {
	background: url(navbackground.jpg) -182px -140px no-repeat;
}

Also do you know if the font “Party LET” is supported by explorer because again in Firefox it works but not in explorer.

Hope you can help guys, I’m really stuck.

Thanks,

Paolo

2

I checked it in IE5.5, 6, 7, 8 and FF. The nav looks the same in all, no ‘overlapping’ issue that you speak of. The only overlapping I see is in IE5.5 the title “our story so far” goes under your red bar at the top a bit. Everything else is fine.

3

Along with aebstract I too am not seeing any overlap in IE6/7/8/FF/Opera

Clear your cache and see if you weren’t just seeing an old version of hte page :slight_smile:

4

Hi Paolo I didn’t get any weird overlapping here. Wanted to say that “Party LET” is not a websupported font, are you using it with Flash text replacement (SIFR) or just trying to declare it in your CSS? The latter won’t work.