Extra line appearing above menu created with list

[michaelh613]

I am just having above my menu list a time barely visable white line occurring. Site XHTML and CSS both validate. Any ideas what to look for. If you want to look it is at <snip>.

The relevant CSS

#mainNav{
padding-left: 0px;
padding-right: 0px;
width: 200px;
float: left;
position: relative;
top: 17px;
}
#mainNav ul {
margin:0; 
padding:0;
}
#mainNav li.button{
margin:0;
padding:0;
background:url(../images/button.png) no-repeat;
}
#mainNav li.expanded {
background:url(../images/expandedbutton.png) no-repeat;
}
#mainNav ul a.menu {
margin:0;
padding:0;
display:block;
line-height:36px;
text-decoration:none;
color:#000000;
font-size: 10px;
color:#4d4325;
font-weight:bold;
position: relative;
left: 18px; 
bottom: 5px;
}

[edited by: DrDoc at 7:44 pm (utc) on Aug. 1, 2008]
[edit reason] No URIs, please. See forum guidelines. [/edit]

[DrDoc]

In which browser are you seeing this behavior?

[michaelh613]

IE 7, firefox, opera and windows safari all have it. These are all the browsers I tested in so I don't think its a browser bug. All the buttons use the same background image so it isn't an issue with the image itself.

Thanks for any help you can give me