CSS/HTML compatibility issues across the same browser - html

Question

Good Day.
I have a rather weird problem. And it is the first time I came across this.
I have an html/css menu (navigation menu) consisting of a ul list and anchor tags inside.
I am using border-bottom to highlight the menu on hover...
Now issue: I have 2 PC's on which I work - Both windows 7, different editions. Now in chrome and firefox, the menu shows fine. Also, I am using an IE only stylesheet to fix an alignment issue in IE. Look at Image1 to see my menu in the above mentioned browsers...
Now on my employer's PC(Windows 8) and on one of my colleagues PC's, also windows 8, the list items are shifted downwards - In Chrome. Also in IE(did not test in FF) - See Image2.
Why would the css display fine on my Chrome browsers but not on theirs. Everthing else on the pages displays fine between the browsers.
See my CSS defining the menu:
/THE CSS FOR THE MENU's PARENT divs/
#wrapper {
margin: 0 auto;
margin: 20px auto;
text-align: center;
width: 960px;
background: #f5f5f5; /*url('/images/bgMain.png') repeat center;*/
-moz-box-shadow:0 0 5px #999;
-webkit-box-shadow:0 0 5px #999;
box-shadow:0 0 5px #999;
}
#header {
margin: 0 auto;
/*background: url('/images/bg2.png') repeat-x center;*/
background: #eee;
text-align: center;
border-bottom: 6px solid #f3911f;
}
/**********************HERE THE MENU CSS STARTS***************/
#menuNav {
height: 100px;
text-align: center;
margin: 0 auto;
}
#menuNav ul {
list-style: none;
}
#menuNav ul li {
display: inline-block;
height: 100px;
line-height: 178px;
}
#menuNav ul li a {
padding: 0px 15px ;
font-family: 'Myriad Pro', 'Open Sans', Arial, sans-serif;
font-size: 22px;
color: #3c3b3d;
text-transform: uppercase;
border-bottom: 6px solid #f3911f;
text-decoration: none;
}
#menuNav ul li a.menuSmaller {
font-size: 18px;
padding-bottom: 2px;
}
#menuNav ul li a:hover {
border-bottom: 6px solid #7f2218;
}
#menuNav ul li a:focus {
border-bottom: 6px solid #7f2218;
}
/*LOGIN*/
#menuNav ul li#login, #menuNav ul li#logout{
float: right;
margin: 0px;
}
#menuNav ul li#login a, #menuNav ul li#logout a {
color: #7f2218;
}
/*Show hover effect on selected/active menu*/
.activeMenu {
border-bottom: 6px solid #7f2218 !important;
}
HTML:
<div id="wrapper" class="row-fluid">
<div id="header" class="row-fluid">
<div id="logo" class="span2">
<div><img src="images/logo.png" alt="CardVault Logo" /></div>
</div>
<div id="menuNav" class="span10">
<ul>
<li id="menuSignUp">Sign Up</li>
<li id="menuPricing">Pricing</li>
<li id="menuCorporate">Corporate</li>
<li id="menuAbout">About</li>
<li id="menuPartners">Partners</li>
<li id="login">Login</li>
</ul>
</div>
</div>
</div>
NOTE: I am using twitter bootstrap for the main layout, but I donlt think that that can cause any issues, it has never before...
Also, we both have the latest Chrome version...
Thank you!

Answer 1

The only times I have seen this happen was between different operating systems as well. In that case, it worked on Windows and Linux but not on Mac. The only common trait between the various occurrences was that the rendered menu font appeared different. And, yes, it cause me some headaches too.
You may also want to reset the page zoom by doing CTRL-0 just in case someone zoomed in and that screwing things up.
What did work is to adjust the padding of menu items until the one incorrect showed up properly and that reached both. Unfortunately, I could only do it by trial and error since the system in question did not have access to the development server.