text css nav bar positions differently in ie/fox

[evan]

I cannot figure out what to do in order to fix this problem, It displays a few pixels lower in fox/safari and in ie it displays about 10 px higher -it keeps screwing up my layout.:mad:


here is the html:

<div id="nav1">
<ul>
<li><a class="hotlink" href="#">Home</a></li>
<li><a class="hotlink" href="#">Attorney Profiles</a></li>
<li><a class="hotlink" href="#">Practice Areas</a></li>
<li><a class="hotlink" href="#">Payment Methods</a></li>
<li><a class="hotlink" href="#">Contact Us</a></li>
</ul>
</div>

the css for the links:


.hotlink {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #FFFFFF;
text-decoration: none;
margin: 25px;
}
.hotlink:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
color: #666666;
margin: 25px;
text-decoration: none;
}

the css for to format the list to display inline:


#nav1{
position:absolute;
left:0px;
top:155px;
width:900px;
height:46px;
z-index:4;
visibility: visible;
/*--------------------*/


margin-top: 1em;
margin-bottom: 0.5em;
}

#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}

#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}

#nav1 li:first-child {
border: none;
}
any suggestions?