"a:selected" doesnt work in IE6?

[mameha1977]

My IE6 doesnt seem to recognise the a:selected CSS item.

Am I doing something wrong or does IE6 just ignore this rule?

[_Aerospace_Eng_]

Why would it work? Its not even valid. I think you are looking for a:active and even then it will only work when the mouse button is held down on the link.

[mameha1977]

hehe ok my mistake. i am using "#sidebar ul li a.selected", wasnt paying attention...

nevertheless it still doesnt work in IE6. seems like some other style overrides this one in IE for some reason.

[_Aerospace_Eng_]

Well without seeing more code there isn't much we can do. Can you post a link to the site?

[mameha1977]

I cant link to the site as its still being developed, but I can show the code:

CSS

#sidebar {
	float:left;
	width:185px;
	padding-left:5px;
	margin-left:3px;
	margin-top:10px;
	font-family:"Verdana", sans-serif;
}

/* IE-Fix */
* html #sidebar {
	margin-left: 0.1em;
}

#sidebar ul {
	list-style-type:none;
	padding:0;
	margin: 0em 0.4em 0em 0em;	
}

#sidebar li {
	_height: 1em; /* IE HACK */
}

/* -- main title for each menu section (not a link) -- */
#sidebar li.head {
	padding:2px;
	padding-left:0px;
	padding-top:7px;
	text-transform:uppercase;
	letter-spacing:1px;
	color: #333;
	font-weight:bold;
	font-size: 0.7em;		
}

/* -- normal menu style -- */
#sidebar ul li a:link, #sidebar ul li a:visited {
	color:#222; 
	font-size: 0.7em;
	text-decoration:none;
	display:block;
	padding-left:15px;
	background-image:url(../images/icons/arrow3.gif);
	background-repeat:no-repeat;
	background-position:0px 0px; /*left top; */
}
#sidebar ul li a:hover {
	color:red;
	background-image:url(../images/icons/arrow2.gif); 	 /* _on */
}
#sidebar ul li a.selected {
	color:red;
	background-image:url(../images/icons/arrow2.gif);
}

/* -- product menu styles -- */
#sidebar li.lv1 a:link, #sidebar li.lv1 a:visited {
	padding:2px;
	border:1px solid #CCC;	
	background:#EEE;
	display:block;
	margin-bottom:1px;
}
#sidebar li.lv1 a:hover {
	background:none;	
	color:#FFF;
	background-color:#FF3300;
/*	background-color:#EEE; *//* 296B9D */
	border:1px solid red;	
}
#sidebar li.lv1 a.selected {
	padding:2px;
	border:1px solid #444;
	background-color:#296B9D; /*#003D6B; *//*004080;*/
	color:#FFF;
	display:block;	
}

#sidebar li.lv2 a:link, #sidebar li.lv2 a:visited {
	margin:0px;
	color:#555;	
	padding:2px;
	border:none;
	background:none;
	text-decoration:none;	
	display:block;
	margin-bottom:1px;	
	margin-top:3px;		
}
#sidebar li.lv2 a:hover {
	background:none;
/*	background-color:#FF3300;*/
	color:#FF3300;		
}
#sidebar li.lv2 a.selected {
	padding:2px;
	background:none;
	color:#FF3300;		
	display:block;		
}

#sidebar li.lv3 a:link, #sidebar li.lv3 a:visited {
	padding:0px;margin:0px;
	border:none;
	background:none;
	padding:2px;
	display:block;									
	color:#999;
	background-image:none;	
}
#sidebar li.lv3 a:hover {
	background:none;
/*	background-color:#FF3300;*/
	color:#FF3300;			
}
#sidebar li.lv3 a.selected {
	padding:2px;
	background:none;
	color:#FF3300;		
	display:block;	
}

HTML

<div id="sidebar">
<ul>

<li class='head'>List By Category</li>

<li class='lv1'>
<a href='products.php?m1=080000&amp;country=AU' title='XXX'>
XXX
</a>
</li>
<li class='lv1'>
<a href='products.php?m1=090000&amp;country=AU' title='YYY'>
YYY
</a>
</li>
<li class='lv1'>
<a href='products.php?m1=010000&amp;country=AU' title='AAA'>
AAA
</a>
</li>
<li class='lv1'>
<a class='selected' href='products.php?m1=150000&amp;country=AU' title='ZZZ'>
ZZZ
</a>
</li>
<li class='lv2'>
<a href='products.php?m1=150100&amp;country=AU' title='Z1'>
Z1
</a>
</li>
<li class='lv2'>
<a class='selected' href='products.php?m1=150200&amp;country=AU' title='Z2'>
Z2
</a>
</li>
<li class='lv2'>
<a href='products.php?m1=150300&amp;country=AU' title='Z3'>
Z3
</a>
</li>
<li class='lv1'>
<a href='products.php?m1=120000&amp;country=AU' title='BBB'>
BBB
</a>
</li>

</ul>

</div>

So the ZZZ main category, and the Z2 sub category are both class 'selected'. In Firefox they are thus displayed differently, but in IE this is not working, they just display the same as non selected items.

[The Little Guy]

maybe your looking for

a:focus

[mameha1977]

Thanks for the suggestion but I believe it has nothing to do with a:focus.

I am succesfully marking up my html so that selected menu items become "class='selected'", but for some reason IE6 doesnt apply that style and Firefox does.

[Kravvitz]

Try changing

#sidebar li.lv1 a.selected

to

#sidebar ul li.lv1 a.selected

[mameha1977]

Well I got some smal progress. Now the selected item has has the color:#FFF applied, but for some reason none of the other style items (background color etc) have been applied.