CSS selected menu problem 2

[Robo82]

Hi all

I have a problem in IE6, I have a vertical menu and when the user hovers over it the selected menu item changes colour and once selected stays that colour.

However in IE6 when the page is loaded the colour is already applied to the menu items(all of them).

Can anyone see my error?

#SideNav{
	width: 180px;
	margin-top: 10px;
	float: left;
	margin-right: 10px;
}
#SideNav p{
	color: #598D98;
	font-weight: bold;
	margin-bottom: 5px;
}
#SideNav ul{
	list-style: none;
	margin: 0 0 0 -5px;
	padding: 0;
}
#SideNav ul li{
	width: 100%;
}
#SideNav ul li a{
	color: #666;
	height: 15px;
	width: 180px;
	text-decoration: none;
	font-weight: normal;
	background-color: #FFF;
	display:block;
	padding: 5px;
}
#SideNav ul li a:hover, #SideNav ul li a.selected{
	color: #FFF;
	height: 15px;
	width: 180px;
	text-decoration: none;
	font-weight:bold;
	display:block;
	padding: 5px;
}
#SideNav ul li a:hover.Blue, #SideNav ul li a.selected.Blue{
	background-color: #3399FF;
}
#SideNav ul li a:hover.Green, #SideNav ul li a.selected.Green{
	background-color: #4BB47A;
}
#SideNav ul li a:hover.Orange, #SideNav ul li a.selected.Orange{
	background-color: #CE9638;
}
#SideNav ul li a:hover.Orange2, #SideNav ul li a.selected.Orange2{
	background-color: #B86C48;
}
#SideNav ul li a:hover.Pink, #SideNav ul li a.selected.Pink{
	background-color: #B82A59;
}
#SideNav ul li a:hover.Purple, #SideNav ul li a.selected.Purple{
	background-color: #94779F;
}
#SideNav ul li a:hover.Default, #SideNav ul li a.selected.Default{
	background-color: #598D9A;
}

 

[BillyRayPreachersSon]

Yes - it's your use of multiple classnames in your rules. IE 6 has a known bug with this where it applies the rule if ANY of the classnames match. So, this rule:

a.selected.Default

would match either:

<a class="selected">

or

<a class="Default">

or

<a class="selected Default">

Unfortunately, this means you'll have to deliver unique classnames to get around this.

IE 6 sucks, doesn't it?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Where you have used this:

#SideNav ul li a:hover.Blue

I would suggest changing it to:

#SideNav ul li a.Blue:hover

It could also be something to do with IE getting confused with multiple classes on the same element. As it tends to do.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Robo82]

thanks Dan, I had a feeling it would be something like that.

You've saved me a lot of searching