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/