Links showing up in different positions on different browsers. - html

Question

I have a bunch of links on the top and bottom of my page. I'll align the links will look aligned in Chrome but when I check out the page using Firefox the links are not in the same position they've moved down a few spots. This is driving me nuts.
here is the link to my webpage
The CSS for the bottom links
#navbot {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:50px;
left:36px;
}
#navbotS {
color:silver;
white-space:nowrap;
text-align:left;
position:relative;
top:48px;
left:44px;
}
#navbotimg {
top:0px;
clear:both;
float:left;
position:relative;
left:168px;
}
#navbot2 {
position:relative;
min-width:800px;
white-space:nowrap;
color:silver;
top: 10px;
left:190px;
}
#navbot3 {
position:relative;
min-width:1380px;
white-space:nowrap;
color:silver;
top: -8px;
left:158px;
}
#mails li {
float:right;
list-style:none;
margin:0 205px 0px -999px;
}
The HTML
<div id='navbot'>
<a class="ex2" href="#" >PERFORMANCE </a>
</div>
<div id='navbotS'>
<a class="ex3" href="#">SPORTSWEAR </a>
</div>
<div id ='navbotimg'>
<img src="MAIN_IMAGES/red_line.png" width="8" height="60"> </div>
<div id ='navbot2'>
<a class="ex1 various11" href="FOOTWEAR_SUB_PAGES/NIKE_SNOW.html">ZOOM FORCE ONE ///</a>
<a class="ex1 various1" href="FOOTWEAR_SUB_PAGES/MERCURIAL_SUPERFLY.html">MERCURIAL SUPERFLY ///</a>
<a class="ex1 various2" href="FOOTWEAR_SUB_PAGES/AIRMAX_MOTO.html">AIRMX MOTO BOOT ///</a>
<a class="ex1 various3" href="FOOTWEAR_SUB_PAGES/le-coq-joakim-noah.html">JOAKIM NOAH ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/NIKE_BMX.html">DUNK GYRIZO</a>
</div>
<div id ='navbot3'>
<ul id="mails">
<a class="ex1 various5" href="FOOTWEAR_SUB_PAGES/NIKE_AIRMAX_90.html">AIRMAX 90 ///</a>
<a class="ex1 various7" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_CORTEZ_FLYMOTION.html" >CORTEZ FLY MOTION ///</a>
<a class="ex1 various" href="FOOTWEAR_SUB_PAGES/sub_page_org.html">ORIGINALS ///</a>
<a class="ex1 various8" href="FOOTWEAR_SUB_PAGES/SUB-PAGE-ARTHUR_ASH.html">ARTHUR ASHE ///</a>
<a class="ex1 various9" href="FOOTWEAR_SUB_PAGES/SUB_PAGE_STUSSY_DUNK_TRAINER.html">STUSSY DUNK TRAINER ///</a>
<a class="ex1 various10"href="FOOTWEAR_SUB_PAGES/SUB_PAGE_AIR_MAX_1.html">AIR MAX I MAXIM</a>
<li><a class="mails" href="mailto:info#ernsteverything.com">INFO#ERNSTEVERYTHING.COM&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>
<li><img src="MAIN_IMAGES/mail_2.png" width="28" height="18" border="0" ></li>
</ul>
</div>