[thelist] Help with CSS vertical alignment of menu items

[Bill Moseley]

On Sat, May 02, 2009 at 10:13:00AM +0100, Symeon Charalabides wrote:
> 
> When you want to middle-align an element inside a container box that you 
> know the height of, the best approach is to declare the line-height of 
> the container box to be equal to its height, and do away with all 
> padding & margins for the element. It works on all browsers.

Thanks Symeon, Shannon for the tip.  Works great.

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?

    #header li a {
        display: block;
        display: inline-block;
    }

Or should I use the old Mozilla-specific 

    #header li a {
        display: -moz-inline-block;
        display: inline-block;
    }


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 can use relative font sizing, but then the menu will break rendering
pretty badly when fonts are large.

Fonts in px: http://hank.org/banner/index.html

Fonts for the menu at 80%: http://hank.org/banner/index2.html



Thanks,



-- 
Bill Moseley.
moseley at hank.org
Sent from my iMutt