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
