weird border issue in ie

cant see anything wrong here,

[kumarsena]

hey guys,

i got a css and list based menu on my site. its got borders and all but the borders dont show for the two first list elements. its working fine in ff. i based it on a artciels from a list apart. i could sticky the address if anyone wants to have a look..

also when dealing with font size and crossbrwser issues, is it better to use em or px?

thanks
kumar

[kumarsena]

oh and...

css:

#mainmenu {

position:relative;
float:left;
border-right:0px solid #000000;
padding: 0 0 0 0;
margin-bottom: 0em;
margin-top:2px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: right;
background-color:#606060;
width:120px;

}

#mainmenu ul {

list-style: none;
margin: 0px;
padding: 0px;
border-top: 1px solid #303030;
border-right:1px solid #303030;
border-left:1px solid #303030;
}

#mainmenu li {

border-bottom: 1px solid #303030;
margin: 0;

}

#mainmenu li a {

display: block;
padding: 5px 5px 5px 5px;
background-color:#505050;
color: #fff;
text-decoration: none;
width: 100%;

}

html>body #mainmenu li a {

width: auto;
}

#mainmenu li a:hover {

background-color: #000000;
color: #000000;

}

html:

<div id="button">
<ul>
<li> <a href="#">Photos</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Stuff</a> </li>
<li> <a href="#">Web Dev.</a> </li>
<li> <a href="#">Resources</a> </li>
<li> <a href="#">Culinaries</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Wolfheart</a> </li>
<li> <a href="#">Wolfheart</a> </li>

</ul>
</div>