[thelist] Help with CSS vertical alignment of menu items

[Shannon Hubbell]

Perhaps set line-height to the height of the button?



On Fri, May 1, 2009 at 10:35 AM, Bill Moseley <moseley at hank.org> wrote:
> 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
>
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>