Hi all hope your having a good day/evening.

Simple question, but maybe not so simple to answer. I have an unordered list, which i am using as a menu. The list items are floated right and sized due to an anchor tag inside them with a roll over. The last element is given a specific size to suck up any extra space. See the code snippits bellow.

css

ul.mainNav { width: 970px; display:block; background:black; clear:both; 
             overflow:hidden;}
ul.mainNav li { float: left; height:29px;}
ul.mainNav li a { display: block; padding:7px 19px; color:#ffffff; 
              background-color:#000; font-weight:bold; text-decoration:none; 
              font-size:13px; }
ul.mainNav li a:hover,
ul.mainNav li a.selected { background-color:#ffff00; color:#000;  }
ul.mainNav li a.last{ text-align:center; padding: 7px 19px; width:58px;}

html

<ul class="mainNav" id="mainNav">
    <li><a href="/Default.aspx">home</a></li>
    <li><a href="/About/">about</a></li>
    <li><a href="/News/">news</a></li>
    <li><a href="/Enter/Registration.aspx">enter SOYA 2010</a></li>
    <li><a href="/Categories/Film.aspx">categories</a></li>
    <li><a href="/Mentors/janChapman.aspx">mentors</a></li>
    <li><a href="/PastWinners/">past winners</a></li>
    <li><a href="/Awards/">awards nights</a></li>
    <li><a href="/Support/" class="last">contact</a></li>
</ul>

It is containted in a <div style="margin:0 auto;">...</div> to center on the menu on screen

Now my problem is: On PC; firefox/ Safari /IE /Chrome are all displaying correctly. Take the same code to a Mac; Safari/ firefox are displaying the menu to be too short and the only thing i can point to is that the fonts may be smaller in widths. The width is currently set to 970px. My question is: How can i get it to display at the same widths without specifying exact widths for each list item?

Any help would be appreciated. If my structure is wrong or it is just a mac thing that i will never solve(hope not).

Cheers, KJ