Question

I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn’t be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.

Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?

Here’s the css rule:

ul#menu li a
{
    width: 80%;
    text-align: center;
    font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    line-height: 38px; 
    color: #333;
    text-shadow: 0px 1px 0px #e5e5ee;


    display: block;
    /*Hiding dots around clicking on links*/
    outline: none;  
    overflow: hidden;
}

Answer 1

If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->

With another CSS rule for the font-size property in this css file.

Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.