Firefox stealing mah pixels

Question

http://jsfiddle.net/wzew9/

#menu {
    width: 1001px; height: 34px;
    padding: 0; margin: 0;
    background-color: #d9e4ea;  
}

#menu ul {
    float: left;
    padding: 0 20px 0 203px; margin: 0;
    list-style: none; line-height: normal;
}

#menu a {
    display: block; border: none;
    margin: 0 47px 0 0; padding: 5px 9px 4px 9px;
    text-decoration: none;
    font-size: 18px;
}

As you can see in the fiddle in Chrome the menu container's height is 34px and the ul's is 30px so when I hover the link there's a 4px wide space. However, if I open it in Firefox the ul is 32px wide and I only get 2px space. I tried adjusting padding of every object but with no luck. So why is Firefox stealing my 2 pixels?

Answer 1

Your problem lays in line-height:normal. Both web browsers have different concept of normality :).

Set line height to relative (ie. 1.2) or absolute (ie. 20px) value and rendering will be the same.