Home/ Questions/Q 6792817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:01:07+00:00

I have a css menu on a webpage that is flowed horizontaly, as the

  • 0

I have a css menu on a webpage that is flowed horizontaly, as the items text in the menu are different widths I have used a padded amount around the text so that the entire menu takes up close to 100% of my page width. The structure is something like this

<ul>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
<li><a href="#"> item 1</a></li>
</ul>

This looks fine in windows under a variety of browsers include Safari on windows. But on OSX safari / firefox the same emnu ahs an element pushed to the next line – breaking the menu. It seem that a 12px high Arial font is rendered a little wider on OSX the windows.

Is this right? I thought that the font reffered to as a cross platform font would be rendered the same. Is this perhaps poor practice [I’m adding padding the the a element to increase the target size for clicking on]

Not to scale screen shots showing mac below windows above

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Font rendering differs from one OS to another, and there’s not much we can do about it.

    If you strictly need that menu to be as wide as the entire page, I see two solutions:

    • Assign the same width to every menu item (and make sure that the text contents fit)
    • Use display: table on the <ul> container and display: table-cell on each menu item.

    Here’s an example of the second strategy: http://jsfiddle.net/MartinodF/J8GX3/

    Note that display: table is not supported by IE7.

    • 0