[thelist] horizontal menu using a list

ben morrison morrison.ben at gmail.com
Thu May 11 04:21:24 CDT 2006


On 5/11/06, Justin Zachan <justin at jazzmanagement.com.au> wrote:
> Hi. I am building a menu that is a list and is horizontal i.e.
>
> .menulist li{
>    display:inline;
>    padding-right:5px;}
>
> I want the menu to spread out evenly (from left to right) so it sits inside
> a box that is 500px wide. I have spaced the menu items with a padding-right
> value. This all works fine on a PC tested on IE and Firefox.
>
> My issues is how it displays on a MAC... It all seems to be the way MACs
> render text. It makes text "fatter". So my last menu item overflows the
> 500px box.

Its not just the Mac that is the issue, you are using fixed sizes for
your fonts and should be using relative sizes - either ems or % [0].
This is also a priority for accessibility.

Design/Navigation should be flexible - what happens when the client
wants to add another menu item?

Ignoring the above comments, you could stop using padding right and
give each nav item a width and use text-align center; so if you had 8
navs you could try.

.menulist {
width:480px;
margin:padding:10px;
list-style:none;
float:left;
}

.menullist li {
float:left;
display:block;
width:60px;
text-align:center;
}

ben



More information about the thelist mailing list