I'm trying to be semantically correct and code a top-navigation
structure using an unordered list, as follows:
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:
... 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 gee [EMAIL-REMOVED] http://www.mode3.com/david
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/