IE6 CSS Menu Problems

Soldato
Joined
30 Nov 2005
Posts
3,084
Location
London
The following menu appears fine in IE7 and Firefox but for IE6 it creates a little extra space above each links text.

The XHTML is strict and validated so I'll just include the CSS below.

Any ideas?


CSS for Menu

Code:
#nav2
{
margin: 0;
padding: 0; 
list-style-type: none;
border-bottom: 1px solid black;
width: 200px;
}

li
{
list-style: none;
margin: 0;
border-top: 1px solid black;
}

li a { text-decoration: none; list-style: none; }

ul {
margin: 0;
padding: 0;
list-style: none;
}

ul li {
list-style: none;
}

li ul {
list-style: none;
top: 0;
}


ul li a {
display: block;
	padding: 0;
	margin: 0;
text-decoration: none;
font-size:0.81em;
height: 1%;
}

#nav2 ul li a:hover {
	background-color: #A30003;
	padding: 0;
	margin: 0;
	color: #FFFFFF;}

#nav2 li a:hover {
	background-color: #A30003;
	color: #FFFFFF;
	}

#nav2 ul li a {
display: block;
text-decoration: none;
}
 
Thanks I've changed it slighlty for me needs, does this still work ok in IE6 etc?

Code:
ul#nav2 { list-style-type: none; margin: 0; padding: 0; width: 200px; }
ul#nav2 li { list-style-type: none;  padding: 0px 0;}
ul#nav2 li a {border-bottom: 1px solid #000; list-style-type: none; text-decoration: none; padding: 0px 0; display: block; width: 200px;}
ul#nav2 li a:hover { list-style-type: none; background: #a30003; color: #fff;}
 
Back
Top Bottom