[thelist] Help with CSS vertical alignment of menu items
Symeon Charalabides
symeon at systasis.com
Sat May 2 04:13:00 CDT 2009
Bill Moseley 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").
Hi Bill,
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.
>
> 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 - ).
Cheers,
--
Symeon Charalabides (cosmopolite trainee)
-----------------------------------------
http://www.systasis.com
http://twitter.com/bluesymeon
http://www.linkedin.com/in/symeon
http://www.last.fm/user/bluesymeon
More information about the thelist
mailing list