CSS - Css Fot Mac And Pc Platform

Right up front, here's the CSS/markup I am concerned about:
http://www.triple-bypass.net/testpage.htm
http://www.triple-bypass.net/testpage.css

It consists of a simple div with a colored background, and a couple anchor elements sitting on top of it. The anchors are treated as blocks, making this a nice little menu.

The problem is that multiple platforms are displaying the anchor boxes in different places. Right now, it looks fine in Firefox 1.5.0.6 on WindowsXP. The anchor boxes stick up about 2 pixels in Firefox 1.5.0.6 on Mac OSX Tiger. And the anchor boxes stick down about 3 pixels in Firefox 1.5.0.6 on Linux.

Here's a screenshot from Firefox on Linux:
URL
(Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.6) Gecko/20060808 Fedora/1.5.0.6-2.fc5 Firefox/1.5.0.6 pango-text)

My guess is that each platform is setting a different baseline for the anchor text, and growing the padding box around it from there. The "top" value that works on Windows, therefore, does not work on OSX or Linux.

The simplest 'solution' would seem to be "Forget Linux and OSX, they're of no concern in the Windows world". However, as an alternative OS advocate, this is something I cannot do. I'm not too concerned about supporting other browsers, but supporting one browser across platforms is important to me.

So has anyone had any experience with this? Is there a way to fix it? Or a hack to get around it?

HTML
Code:

<div id="nav">
		<ul> 
			<li class="first"><a title="#" href="#">About Company</a></li>
			<li><a title="#" href="#">RRR News</a></li> 
			<li><a title="#" href="#">Apartment Communities</a></li>
			<li><a title="#" href="#">Commercial Properties</a></li>
			<li><a title="#" href="#">Current Developments</a></li>

			<li class="last"><a title="#" href="#">Resident Login</a></li>
		</ul>
	</div>

CSS
Code:

 /*** Main Navigation Styling ***/
#nav {
	border-top: 1px solid #897409;
	border-bottom: 1px solid #897409;
	background:#fff url(../images/nav_off_back.jpg) repeat-x center;
	height: 29px;	
}
#nav ul{
	font-size: 17px;
	margin:0;
	float:left;
	text-align:center;
	width:100%;

}
#nav li {
	display:inline;
	margin:0;
	float:left;
	list-style: none;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	min-height: 27px;
	height: 27px;
	line-height:27px;
	padding:1px 0;
}
#nav li.first {
	background:url(../images/nav_bars.gif) left center no-repeat;
	padding-left:2px;
	_margin-left:24px;
	
}
#nav li.first a,
#nav li.first a:link{
	border-left:0;
	
}

#nav li.last {
	border-right:1px solid #fff;
}

#nav li a {
	color: #000;
	text-decoration: none;
	text-align:center;
	min-height: 27px;
	height:27px;
	padding:6px 17px 6px 17px;
	border-right:1px solid #b49f36;
	border-left:1px solid #fff;
}

#nav li a:hover {
	text-align:center;
	background: url(../images/nav_on_back.jpg) repeat-y center;
	color:#fff;
	min-height:27px;
	height: 27px;
	padding:6px 17px 6px 17px;
}

This code produces a centered horizontal navigation menu in FireFox Mac and IE6 PC. However, in FireFox PC the whole menu is shifted a bit to the right off-center (about 15 px). In IE7 PC, the menu sits on the left and is not centered at all.

I am willing to use a browser sniffer to fix the IE7 problem, but I'm not sure what to do for Firefox. The PC and Mac versions of Firefox usually play nice, but not this time. I'd rather not use both a platform AND browser sniffer, but I'm running out of ideas. The addition of a pixel-specific line-height for #nav li { helped some earlier issues, but did not fix them all.

Having an odd rendering problem involving centering content in a fixed-width right hand column that lies within a fixed width centered master content div.

Take a look at the template he http://www.ipfwcommunicator.org/devindex.php

At first I tried to center the content using align="center" in the HTML markup, which I know is a no-no, so I'm not too sad it didn't work. I then tried {margin-left: auto; margin-right: auto;}, thinking it would work in IE as it does with tables, but it did not. Both of these attempts worked worked with most modern browsers (Moz/Firefox/Safari/NN7) but failed on MSIE5/Mac and IE6/Win. Nice and compliant, and I would be happy in a perfect world, but alas, 90% of my readers use a (vastly) imperfect browser.

I decided to get a bit more professional and utilize CSS positioning, setting the DIVs that hold the content boxes (i.e., Weather/Search/etc.) as {position: relative; left: 15px;}This also worked in most browsers, but oddly enough on IE5 Mac (and assume IE6 win although I didn't have a chance to test) the boxes centered but the tables inside the weather/search boxes that allow for cross-platform formating jutted out the side.

Lastly, and this is the current solution, since the column is fixed width and the boxes are fixed width, I used the "ice" solution of dividing the remaining margin by two, and setting margin-left: equal to that. In this case:

{margin-left: 15px;}

Oddly enough this works FINE on everything, even IE5/Mac, but doesn't work on IE6/Windows, which instead results in what appears to be 5 or 6px more than the defined 15px.

Compare here between Firefox and IE6 and you'll see it.

And CSS is here

So the question: What IS the best way to center up those boxes in that column? This is my first major CSS undertaking, having worked with nested tables up until now, so any pointers on my bad markup will be gladly accepted

Thanks in advance,

Aiden