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?

Thanks

CSS for Menu

#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;
}

IE 6 has some ugly rendering of lists, adding extra unwanted space. Hopefully you are using conditional comments too. In order to force IE to close the ugly gaps, you need to give the <a> inside the <li> a height like this:

#nav li a {
height: 1%;
vertical-align: bottom;
}

You should put that in a separate CSS file that only contains the fixes you need to slap IE into line, using conditional comments in your HTML to call it.

No change there Im afraid.

Not sure what else to do.

Here is my HTML.

<ul> 
  <li><div class="titlenavhome"><a href="link" class="titlenavhome">Home</a> </div></li>
  <li><div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li> 
	  <li><a href="link.php"  >link/a></li>
	  <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>   
    </ul> 
  </li> 
  </li>
   <li><div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>   
    </ul> 
  </li>
  <li> <div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li> 
    </ul> 
  </li>
  <li>  <div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
    </ul> 
  </li> 
  <li><div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="glink.php"  >link</a></li>
	  <li><a href="clink.php"  >link</a></li>
	   <li><a href="link.php"  >link</a></li>  
    </ul> 
  <li> <div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>
    </ul> 
  </li>
  <li><div class="titlenav">link</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li> 
    </ul> 
  </li> 
    <li> <div class="titlenav">Web Links</div> 
    <ul> 
      <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li>
	  <li><a href="link.php"  >link</a></li> 
    </ul> 
  </li> 
  <li> <div class="titlenav">link</div>
	    <ul> 
      <li><a href="link.php"  >link</a></li>
    </ul> 
<li> <div class="linknav"><a href="link"  class="linknav">link</a></div>
	</li>                       
   
	    <li> <div class="navcontact"><a href="link.php" class="navcontact" >Links</a></div> </li>
</ul>

Hmm... seems to have something to do with the <divs> in the middle of the list because it does not do it on the "home" list item, just all those that follow the <divs>.

Would the Divs really affect the actual working links?

Is there anything I should look for in the Div styles?

Is it fixed it you make the "titlenav" a link such as # ?

All that the Div class "titlenav" is

.titlenav {
background-color: #8C0000;
font-weight:bold;
}

"titlenavhome" is as follows:

.titlenavhome {
font-weight:bold;
background-color: #333333;
}

ul li a.titlenavhome  {
display: block;
text-decoration: none;
font-size: 100%;
}

The divs don't affect the working links, that part is fine.

I tried a few things on those div classes but couldn't affect any changes on that funny gap. I'll have to play with it a bit more.

** Ok, I think you'd better give us ALL of the CSS. I now see that the bottom 2 links, those with extra classes applied, do NOT have the funky extra gap.

Ok, basically I think you've got a conflict going on. I stripped it down some and the gaps went away:

CSS

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

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

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

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

#nav2 ul li a {
display: block;
text-decoration: none;
height: 1%;
vertical-align: bottom;
margin: 0;
padding: 0;
}

.titlenav {
background-color: #8C0000;
font-weight:bold;
padding: 0;
margin: 0;

}

.titlenavhome {
font-weight:bold;
background-color: #333333;
padding: 0;
margin: 0;
}

ul li a.titlenavhome {
display: block;
text-decoration: none;
font-size: 100%;
margin: 0;
padding: 0;
}
.linknav a{
display: block;
}
.navcontact a{
display: block;
}

Then the HTML (w/o knowing what it really is)

<ul id="nav2">
<li><div class="titlenavhome"><a href="link" class="titlenavhome">Home</a> </div></li>
<li><div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
</li>
<li><div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li> <div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li> <div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li><div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="glink.php" >link</a></li>
<li><a href="clink.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
<li> <div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li><div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li> <div class="titlenav">Web Links</div>
<ul>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
<li><a href="link.php" >link</a></li>
</ul>
</li>
<li> <div class="titlenav">link</div>
<ul>
<li><a href="link.php" >link</a></li>
</ul>
<li> <div class="linknav"><a href="link" class="linknav">link</a></div>
</li>

<li> <div class="navcontact"><a href="link.php" class="navcontact" >Contact</a></div> </li>
</ul>

Thanks LadynRed.

I will try it out and report back.

Again thanks for all your help.

It really is appreciated.