Padding in chrome but in firefox or ie - html

Question

I have an issue with extra padding in chrome.
Everything works fine on Firefox and IE, but chrome adds a 2px padding on the bottom between the "ul" tag and the "nav" tag.
Here's the HTML code :
<nav id="mainMenu">
<ul id="menuLinks">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
And the css :
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.3em;
}
nav#mainMenu {
height: 35px;
background-color: #F5F5F5;
margin-bottom: 10px;
border-bottom: 1px solid #C2C2C2;
border-radius: 5px 5px 0px 0px;
}
nav#mainMenu ul {
float: left;
padding-top: 15px;
list-style-type: none;
}
nav#mainMenu ul li {
padding-left: 5px;
display: inline;
}
nav#mainMenu ul li a {
color: black;
font-size: 0.9em;
font-weight: bold;
background-color: #FFFFFF;
padding: 5px 15px 4px 15px;
border-top: 1px solid #C2C2C2;
border-left: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
border-radius: 4px 4px 0px 0px;
}
This is how it seems :
Chrome :
Firefox :
You can also test it here : http://jsfiddle.net/ozpofj6o/
As you can see, firefox renders correctly, but not chrome.
Any ideas ?

Answer 1

Your problem is related to using font-size:0.9em in the anchors. This leaves you dependent on font rendering mechanisms on how high they exactly become, which happens to be 2 pixels shorter in Chrome with its current text rendering engine. You should specify an exact height for the anchors if you put exact height (35px) on the container and still want to get predictable results.
You're now counting on 0.9em and 9 pixels of padding on the a to 'accidentally' add up to 35 pixels, which it may or may not. It may even break in the next version of Firefox, or on a different platform.