CSS text alignment with Mac browsers - css

Question

I've created a CSS top bar menu that uses the | character as separators. It's rendering exactly as it should on any browser I try for Linux or Windows. But, on Mac, with any browser, the | characters drop down a line or so, and render below the menu bar.
CSS
#menu {
position:relative;
width:80%;
min-width:800px;
margin-left:auto;
margin-right:auto;
margin-top:1%;
text-align:center;
border-top:1px solid #666666;
border-bottom:1px solid #666666;
padding: 12px 12px;
height:1.6em;
font-family: 'Geometria-Medium';
}
#menu ul {
display:inline-block;
margin: 0;
margin-left:auto;
margin-right:auto;
text-align:left;
padding: 0px;
line-height: 1.2em;
}
#menu li {
list-style:none;
}
#menu>ul>li {
float: left;
margin-right: 1px;
position:relative;
}
#menu>ul>li ul {
position:absolute;
}
#menu>ul>li ul>li {
bottom:0px;
display:none;
width:15em;
float:left;
}
#menu>ul>li:hover ul>li {
display:block
}
#menu a {
display:block;
padding: 0px 5%;
text-decoration: none;
text-transform: uppercase;
color:#666666;
line-height:2em;
}
#menu a:hover {
text-decoration: none;
cursor:pointer;
}
#menu .active {
}
#sub {
background-color:#CC0000;
line-height:2em;
}
#sub a:hover {
background-color:#ff9999;
}
HTML
<div id="menu">
<ul class="nav">
<li class="navLi" style="vertical-align: top !important;">Home <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">About <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Services <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Portfolio <span style="vertical-align: top !important;"> |</span>
<ul id="sub">
<li>The Sparkle Project</li>
<li>Jam In Jubilee</li>
<li>Connect Now Network</li>
<li>Ovidiu Bistriceanu</li>
<li>The Devon Clifford Music Foundation</li>
</ul>
</li>
<li class="navLi">Testimonials <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Blog <span style="vertical-align: top !important;"> |</span></li>
<li class="navLi">Contact</li>
</ul>
</div>
Any help would be greatly appreciated. Thanks

Answer 1

If it was me..
I'd put all my css in a css file, not inline. Then I'd use css for visual appearances, like below..
#menu>ul>li{
border-right: 1px solid #000;
padding-right:20px;
padding-left: 10px;
}
#menu>ul>li:last-child {
border-right:none;
padding: none;
}
...
<div id="menu">
<ul class="nav">
<li class="navLi">Home</li>
<li class="navLi">About</li>
<li class="navLi">Services</li>
<li class="navLi">Portfolio
Demo