> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-
> boun...@lists.css-discuss.org] On Behalf Of D A
> Sent: Wednesday, February 03, 2010 9:10 AM
> To: css-d Discuss
> Subject: [css-d] horizontal, variable height nav bar. Doable with
> display: table?
>
> I'm building a horizontal tab navigation where each link may be
> different in height (multi-line).
>
> In <= IE7 I'm using javascript to adjust everything as needed to they
> visually are all the same height.
>
> In IE8 and the rest, I'm using display: table to achieve this:
>
>
> <ul>
> <li><a href="">My Link</a></li>
> <li><a href="">My Link</a></li>
> <li><a href="">My Link<br />that is taller<br />than the
> rest</a></li>
> </ul>
>
>
> ul {
> display: table
> }
>
> li {
> display: table-cell
> vertical-align: center;
> }
>
> That gives me the visual look I want: 3 links laid out horizontally
> with text centered vertically with the last one being taller.
>
> Alas, the issue is that while the LIs are all the same height, the
> actual anchor tags are only as high as the text. I'd like it so that
> all of the anchor tags (as well as the LIs) are all the same height so
> that each link has the same size target to click on.
>
> Is that doable with just CSS? Or will this also be a task for
> javascript?
display:block on the As should make it work as you want.
As a site note, I'd wrap the UL in a DIV to style that DIV with
display:table and style the UL with display:table-row
This should prevent the last element to drop ("randomly") in some browsers
(check the archives).
--
Regards,
Thierry | www.tjkdesign.com
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
