[thelist] Help with CSS vertical alignment of menu items

[Will]

On Sat, May 2, 2009 at 7:28 AM, Bill Moseley <moseley at hank.org> wrote:
> To make the entire height of the <li> click-able I have used "display:
> inline-block".  I initially used just "display: block" but that did
> not work in IE6.
>
> But "inline-block" is not supported in FF2 (not that anyone still uses
> it).  Should I just use both?

If you set the anchors to display: block and float them as well you
should be all set.

>
> Also, I know this is an old debate, but what do you recommend about font
> sizes for a menu like this?  I can use px sizing to force a specific
> size regardless of their text size setting.  But that's not very accessible.

I think this is pretty much the best article on font sizes on the web:
http://www.alistapart.com/articles/howtosizetextincss

A word of caution about relying on line-height for vertical
centering... if you ever have more than one word and it needs to wrap,
the distance between each line pretty much breaks it immediately.  I
use line-height for this exact purpose all of the time but you kind
have to be careful with it. Basically, CSS' inability to deal with
vertical centering is a big hole in the spec and line-height is a nice
hack but it should be regarded as such: a hack. Like all the other
hacks we wind up using, it should be used with care. If you were
designing templates for a CMS where another user can control the
content, for instance, line-height would almost certainly bite you in
dark place just when you weren't looking.

Will