CSS/HTML compatibility issues across the same browser

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><a href="Home.aspx" title="Card Vault logo"><img src="images/logo.png" alt="CardVault Logo" /></a></div> </div> <div id="menuNav" class="span10"> <ul> <li id="menuSignUp"><a href="SignUp.aspx">Sign Up</a></li> <li id="menuPricing"><a href="Pricing.aspx">Pricing</a></li> <li id="menuCorporate"><a href="Corporate.aspx">Corporate</a></li> <li id="menuAbout"><a href="About.aspx">About</a></li> <li id="menuPartners"><a href="Partners.aspx">Partners</a></li> <li id="login"><a href="login.aspx">Login</a></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!