css hack for safari on mac

Question

Hi, just wondering if some one could help me with css hack for safari on mac, what I'm trying to do looks good on safari for windows but looks different on mac,

on my top navigation I'm trying to center everything,it looks centered on firefox,ie,safari but on safari on mac it's not centered, so I wanted to give it left margin that could only be visible on safari for mac.

  <div id="main_nav">
 <ul>
      <li><a href="about.php">about us</a></li>
      <li><a href="women.php">women</a></li>
      <li><a href="man.php">men</a></li>
      <li><a href="beauty.php">beauty</a></li>
      <li><a href="lust.php">the lust</a></li>
      <li><a href="press.php">press</a></li>
    </ul>
  </div>

  #main_nav {
width:74.7em;
height:2.3em;
position:absolute;
top:13.9em;
left:0;
background:#000;
margin:0 0 0 6.9em;
text-align:center;
  }

 #main_nav ul {
width:49em;
height:1.7em;
color:#FFF;
font-size:1.3em;
letter-spacing:.2em;
text-alight:left;
margin:0 auto 0 auto;
}

#main_nav ul li {
display:inline;
list-style-type:none;
}

#main_nav ul li a {
display:block;
height:1.6em;
float:left;
color:#FFF;
text-decoration:none;
margin:0em 0 0 4em;
padding-top:.2em;
}

#main_nav ul li:first-child a {
margin-left:0.5em;
}

#main_nav ul li a:hover {
background-color:#90F;
}

thanks

Answer 1

I do not have a Mac to test on, but this CSS seems to do the trick in Safari, Chrome, Firefox, Opera, and Internet Explorer on Windows. (I only posted the changed part)

#main_nav {
    width:74.7em;
    height:2.3em;
    margin:13.9em auto 0;
    background:#000;
    text-align:center;
}

#main_nav ul {
    width:49em;
    height:1.7em;
    color:#FFF;
    font-size:1.3em;
    letter-spacing:.2em;
    text-alight:left;
    margin:0 auto;
}

Small thing... This line in *#main_nav ul* is redundant as the short form allows you to specify the first two and have the same values applied to the opposite sides:

margin:0 auto 0 auto;

So, the equivalent version is:

margin:0 auto;