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.


here is the html:
Code:
<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:

Code:
.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:
Code:
#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?