IE6 CSS Menu Problems

Soldato
Joined
30 Nov 2005
Posts
3,083
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;
}
 
Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
Here you go.Checked in IE6, Opera and Firefox and it looks identical in all. It should look the same in IE7 as well but I'm too lazy to boot up my other computer to test it.
You might want to replace the li a px padding with em values instead. Leave the 1px padding on li though as it creates the 1px space between the mouseover background color and the dividers.


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


<ul id="nav2">
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
</ul>

I've also put it online so you can be sure I have it right.
http://www.tripnologist.com/jamesu2005/
 
Last edited:
Soldato
OP
Joined
30 Nov 2005
Posts
3,083
Location
London
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;}
 
Soldato
Joined
12 May 2007
Posts
3,896
Location
Bristol
Well, it looks different than the code your original menu produced. (The 1px gap between mouseover background color and the black dividers is gone).. but it does look the same in IE and FF.

Can I ask why you keep adding "list-style-type: none" to everything? You only need to add it once to the ul to have it apply to the entire list. You're making your CSS needlessly long.

This below will produce the exact same menu that the css code you posted above will.

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