[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