Question

I built an HTML navigation strip using ul and li tags.

<div id="navLimitedLength">
    <ul id="navmenulist">
        <li class="menu"><a>Add</a></li>
        <li class="menu"><a>Update</a></li>
        <li class="menu"><a>View</a></li>
        <li class="menu"><a>Delete</a></li>
    </ul>
</div>

Intially I set it to have Arial font using CSS as follows:

    li.menu a
    {   
        text-decoration:none;
        font-family:Arial;
        font-size:18px;         
    }

Then I tried to change the font to Segoe UI as follows:

li.menu a
{   
    text-decoration:none;
    font-family: 'Segoe UI';
    font-size:18px;         
} 

However this also changes the look of menus making them to overlap down

As far as I understand, changing font should not change other styling. This may be since I am trying it in IE8.

But what is the standard way to ensure that things remain in place and behave in desired way.

Answer 1

The difference is caused by different default line heights for different fonts. By CSS specifications, the initial value of line-height is normal, and by the spec, browsers are expected to “to set the used value to a ‘reasonable’ value based on the font of the element”. If you inspect the situation in Firebug, you can see that for 18px Arial, the used value is 22px, but for Segoe UI it is 25px.

In this case, adding e.g. line-height: 1.2 into the style sheet would help.