Css - Display Variance Between Browsers

[racheld]

I am building the main nav areas of a site I'm working on and can't seem to get firefox and safari to display the elements the same. The positions are different in each browser. Below is my html and css code.Any help would be greatly appreciated!HTML CODE

<div id="body">    <div id="container">     		      <div id="header">            <div id="navArea1">              <ul class="links_ul">               <li id="home"><a href="#"></a></li>                 <li id="contact"><a href="#"></a></li>                          <li id="siteMap"><a href="#"></a></li>              </ul>           </div>              </div>                              <div id="mainBanner">          <div id="navArea2">            <ul class="links_ul">              <li id="hdr_About"><a href="#"></a></li>              <img class="separators" src="images/separator.jpg" />              <li id="hdr_Cases"><a href="#"></a></li>              <img class="separators" src="images/separator.jpg" />              <li id="hdr_Reports"><a href="#"></a></li>            </ul>           </div>        </div><!--end header-->           <div id="areasOfPrac">         <div id="navArea3">          <ul class="links_ul">           <li id="hdr_AboPract"><a href="#"></a></li>           <li id="hdr_HealthPract"><a href="#"></a></li>           <li id="hdr_manageConsult"><a href="#"></a></li>           <li id="hdr_collGov"><a href="#"></a></li>           <li id="hdr_govStratPlan"><a href="#"></a></li>           <li id="hdr_facil"><a href="#"></a></li>          </ul>         </div>      </div>      </div><!--end container div--></div><!--end body div-->

CSS CODE

@charset "UTF-8";/* CSS Document */#body {	margin: 0;	padding: 0;	text-align: center;  	font-size: 11px;	font-family: Arial, Helvetica, sans-serif;	}#container{	width: 715px;	text-align: left; /* this overrides the text-align: center on the body element. */	margin-top: 0;	margin-right: auto;	margin-bottom: 0;	margin-left: auto;}#header{	background-image:url(images/topHeader.jpg);	width:715px;	height:20px;	margin-top:0px;	margin-bottom:0px;}#navArea1{	float:right;	width:175px;	margin-top:0px;	margin-bottom:0px;	}.links_ul{	list-style:none;	display:inline;}#home a {	background:url(images/basicNav_home.jpg);	width: 31px;	height:17px;	float:left;	padding-right:10px;	background-repeat:no-repeat;}#home a:hover { 	background-position: 0 -17px;}#contact a {	background:url(images/basicNav_contact.jpg);	width: 60px;	height:17px;	float:left;	padding-right:10px;	background-repeat:no-repeat;}#contact a:hover { 	background-position: 0 -17px;}#siteMap a {	background:url(images/basicNav_siteMap.jpg);	width: 50px;	height:17px;	float:left;	background-repeat:no-repeat;}#siteMap a:hover { 	background-position: 0 -17px;}#mainBanner{	background-image:url(images/header_blueBkgd.jpg);	height:96px;	width:715px;	margin-top:0;	margin-bottom:0px;	clear:both;	float:none;	}#navArea2{	float:right;	width:330px;	margin-right:16px;	margin-top:57px;}.separators{	float:left;	padding-right:5px;	padding-left:5px;	margin-top:-6px;}#hdr_About a {	background:url(images/about.jpg);	width: 60px;	height:18px;	float:left;	padding-right:2px;	background-repeat:no-repeat;}#hdr_About a:hover { 	background-position: 0 -18px;}#hdr_Cases a {	background:url(images/casesClients.jpg);	width: 96px;	height:18px;	float:left;	background-repeat:no-repeat;}#hdr_Cases a:hover { 	background-position: 0 -18px;}#hdr_Reports a {	background:url(images/publications.jpg);	width: 142px;	height:18px;	float:left;	background-repeat:no-repeat;}#hdr_Reports a:hover { 	background-position: 0 -18px;}#areasOfPrac{	background-image:url(images/header_AOP_Bkgd.jpg);	height:60px;	width:715px;	}#navArea3{	float:left;	margin-left:16px;	width:700px;	height:38px;	padding-top:5px;	float:left;}#hdr_AboPract a {	background:url(images/aboPract.jpg);	width: 59px;	height:38px;	float:left;	padding-right:57px;	background-repeat:no-repeat;}#hdr_AboPract a:hover { 	background-position: 0 -38px;}#hdr_HealthPract a {	background:url(images/healthPract.jpg);	width: 47px;	height:38px;	float:left;	padding-right:57px;	background-repeat:no-repeat;}#hdr_HealthPract a:hover { 	background-position: 0 -38px;}#hdr_manageConsult a {	background:url(images/manageConsult.jpg);	width: 69px;	height:24px;	float:left;	padding-right:57px;	background-repeat:no-repeat;}#hdr_manageConsult a:hover { 	background-position: 0 -24px;}#hdr_collGov a {	background:url(images/cenCollGov.jpg);	width: 81px;	height:38px;	float:left;	padding-right:57px;	background-repeat:no-repeat;}#hdr_collGov a:hover { 	background-position: 0 -38px;}#hdr_govStratPlan a {	background:url(images/govStratPlan.jpg);	width: 76px;	height:38px;	float:left;	padding-right:57px;	background-repeat:no-repeat;}#hdr_govStratPlan a:hover { 	background-position: 0 -38px;}#hdr_facil a {	background:url(images/facilitation.jpg);	width: 65px;	height:11px;	float:left;	background-repeat:no-repeat;}#hdr_facil a:hover { 	background-position: 0 -11px;}

[Mencarta]

How does it display in each browser?

[thescientist]

whats the intended design supposed to be?

[racheld]

whats the intended design supposed to be?

Here are screenshots of how it's displaying in each of the browsers, and then a screenshot of what it's supposed to look like:http://www.kta.on.ca/images/safari.pnghttp://www.kta.on.ca/images/firefox.pnghttp://www.kta.on.ca/images/intendedDesign.png (disregard the colour differences in the text, it's the positions I'm concerned with)Thank You!