[thelist] horizontal menu using a list

Bill Moseley moseley at hank.org
Thu May 11 06:57:58 CDT 2006


On Thu, May 11, 2006 at 10:21:24AM +0100, ben morrison 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.

And placing ems or percents inside a fixed pixel width box presents
its own problems, as can be seen when resizing.  Hard to find the
perfect solution.

I'm working on a nav in a liquid design where there's a fixed width
box (a photo) on the right and the left content area is suppose to be
resizeable.  The designer's mockup was a complete table layout (in
fact, I think the design was driven by the tables instead of the other
way around:

    http://2006.infopeople.org/  (That's the designer's mockup)

That's *not* the final page.  I posted that link on another list and I
got private hate mail from a few people that confused that mockup with
the actual page that will be in production.


I'm using a tableless design for the production pages. Trying to
convert the ridged design into something that's liquid and more
accessible yet retains the original design elements has been a little
challenging.

Anyway, I'm starting to think using a table for the nav bar is the
best solution.

Here's an early test without tables with <ul> where widths are set for
each <li>.

    http://hank.org/demos/foo.html

The advantage of a table is it's much easier to make it fit 100% width
and resizeable, have the buttons automatically size for the width of
the text, make it easy to add menu items, and have all buttons resize
in height together.

http://hank.org/demos/foo3.html is using a table.  Resizing there
works much better, I think.

Still, depending on the user's font setup/screen size, the buttons are
sometimes double-height.  There's not enough wiggle room in the boxes
to allow one or two user font size changes before the buttons go
double size.

So, I'm even thinking about trying to use background images for the button
text, but still have the button text so it's semantic and works for
the screen readers, but move the text off screen.  There's always
trade offs.



-- 
Bill Moseley
moseley at hank.org




More information about the thelist mailing list