I've been working on creating a mouseover effect for a HouseMenu - it works perfectly, but there's now a 1px space between the list items in IE that I can't get rid of.  Here's what I'm using to style my menu and the container its in.  Any suggestions of what I can try?

#navigation
{
    position: absolute;
    left: 0;
    top: 0;
    width:200px;
    background-color: #231f20;
    margin-top: -0.5em;   
}
#navigation ul
{
top: 1.1em;
}

#navigation ul li
{
height: 40px;
list-style-type: none;
text-align: center;
background-color: #dfba39;
font-family: Garamond;
font-weight: bold;
font-size: 14px;
border: 1px solid white;
margin: 0;
}
#navigation a
{
    color: #000;
    text-decoration: none;
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#navigation a:hover
{
text-decoration: none;
display: block;
background-color: #eed424;
}

#navigation ul li a.active
{
background: #7F8400;
}

Here's the code:

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="HouseMenuSkinObject.ascx.vb" Inherits="TimRolands.DNN.SkinObjects.HouseMenuSkinObject.HouseMenuSkinObject" %>
<asp:literal id="litMenu" runat="server"></asp:literal>

That's all I can find.  I also looked at the source code my actual page is generating and don't see any extra line breaks.

Thanks - that's good to know for future reference.

I just figured out what was causing the problem - I was using display:block to achieve the rollover effect, which looks great in all browsers except IE.  IE treats is like a line break, which is why I was seeing the one pixel gap.

I thought I'd at least post what was causing it in case someone runs into the same problem in the future!