Hmmm, have now spent a day reading the entire web with no answer yet! so now
resorting again to the experts...
I'm trying to create a horizontal list. This is easy enough doing:
<html>
<head>
<style type="text/css">
#legend ul {
white-space: nowrap;
}
#legend li {
display: inline;
border: 1px solid black;
}
</style>
</head>
<body>
<ul id="legend">
<li>some data </li> <!-- MUST have trailing spaces to remove "gap" in
NS -->
<li>some more data, a bit longer </li>
<li>short </li>
</ul>
</body>
</html>
My problem is that I would like to have each element the same width. So
naturally, I modify the li style as:
#legend li {
display: inline;
border: 1px solid black;
width: 10em;
}
That works fine for IE6. But Netscape/Mozilla do not respect the width rule.
I can understand why as the li item is now inline hence width doesn't make
sense. But I'd still like to achieve the effect. I know I could pad out my
next with but that is a kludge and only marginal at best (a guessing
game on font sizes, etc). I also don't have the luxury of creating fixed
sized images.
So am I missing something? Or is this simply not officially supported and IE
is just being nice?
regards,
-randall
