CSS menu (unordered list)

[scojo1]

I have a list that I use for navigation:


#site_nav ul{
list-style: none;
padding: 0px;
margin: 0px;
border-bottom: 2px solid white;
}

#site_nav li{
padding: 0px;
margin: 0px;
background-color: #336699;
}

#site_nav li a{
padding: 5px;
height: 20px;
display: block;
color: #FFFFFF;
text-decoration: none;
}

#site_nav li a:hover{
display: block;
background-color: #666666;
text-decoration: none;
}



<div id="site_nav">
<ul>
<li><a href="lookup.php">Home</a></li>
<li><a href="dsl.php">DSL/Wireless Lookup</a></li>
<li><a href="dialup.php">Dialup Lookup</a></li>
</ul>
</div>

In the CSS if I omit the line 'height: 20px;' Firefox displays the menu perfectly, but IE spaces out the list items an ungodly amount.

I was just wondering if this is simply due to the way that IE handles lists.

[spufi]

It's probably the way they choose to handle the 5px padding you have and each browsers default setting for those tags. You might want to look into the Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html)