• Notice regarding image hosts and attachments. See here.

IE6 CSS Menu Problems

Soldato
Joined
30 Nov 2005
Posts
3,086
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