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?
The catch is that I won't know how tall the tallest link will be in
any given case, so it's not a size I can hard-code per link.
-DA
______________________________________________________________________
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/
