[thelist] Help with CSS vertical alignment of menu items

[Bill Moseley]

I have A few questions about this layout:

    http://hank.org/banner/

Goal is to make the markup and css as simple as possible,
work best with different font sizes, and to work in IE6 as well
as modern browsers.

Some of the questions I have are on that page, but the main problem
I'm having is vertically aligning the menu links (and text in the case
of "Blog").

Those links are display block to allow clicking anyplace in the
button-like area:

    #header li a {
        height: 100%;
        display: block;
    }

I got stuck on trying to vertically align the links (and "Blog" text),
and tried this:


    #header li a,
    #header li.on {
        padding-top: 35px;
    }

Which means if font size is changed then the text isn't vertically
aligned.


That also pushes the box of the <a> down below the banner (as can be
seen by mousing over *below* the banner bar).

Other one I'm not sure about is why it doesn't render in IE6.  I
assume because of hight issue someplace.

IE7 and Safari seem to render ok, although not sure why IE7 doesn't
render 100% when making the view smaller (Ctrl - ).


Any suggestions or tips regarding this approach are more than welcome.

Thanks,



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