[thelist] Help with CSS vertical alignment of menu items

[Shannon Hubbell]

I should clarify... line height of the anchor.


On Fri, May 1, 2009 at 11:30 AM, Shannon Hubbell <brundlefly at gmail.com> wrote:
> 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 !
>>
>