Sent by david gee on 28 July 2004 22:10
I'm trying to be semantically correct and code a top-navigation
structure using an unordered list, as follows:
<ul>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
<li><a href="#">link</li>
</ul>
the LI's and A tags are set to "display:block" and "float:left" and have
fixed-pixel widths. they also have background images, so I've got a
navbar effect going. similar to alistapart.com and about a million other
sites on the web.
the problem is, the navigation needs to accommodate
internationalization, so i need to allow for the text to wrap to a new
line. i've taken care to make the background images accommodate this,
but I *must* have the text vertically aligned within the fixed-height
container. I can accomplish this very easily by changing the structure to:
<table>
<tr>
<td><a href="#">link</a></td>
<td><a href="#">link</a></td>
<td><a href="#">link</a></td>
<td><a href="#">link</a></td>
</tr>
</table>
... thereby taking advantage of the TD's default vertical-alignment.
is there any way to do this in pure CSS that *works in Internet Explorer
5.5+* with the limitation that the "A" tag must remain block level and
fixed width/height (i'm using the hover state to switch the
background-image)? I know I could probably use "display:table-cell" to
get it to work in Mozilla, but that defeats the purpose. I don't know
ahead of time which links will wrap and which won't, so I can't twiddle
with the margins and padding on a link-by-link basis.
david
--
david gee [EMAIL-REMOVED] http://www.mode3.com/david
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
