By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,592 Members | 1,958 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,592 IT Pros & Developers. It's quick & easy.

Horizontal Navigation bar and fixed width

P: n/a
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 &nbsp; 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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Randall Sell wrote:

[snip]
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.
Yes, that's right.

<URL:http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width>

But I'd still like to achieve the effect.
#legend li {
display: block;
width: 10em;
float: left;
}
[snip] So am I missing something? Or is this simply not officially supported and
IE is just being nice?


Only if you consider ignoring the specification "being nice".

"[The 'width' property] Applies to: all elements but non-replaced inline
elements, table rows, and row groups"

"The width of a non-replaced inline element's boxes is that of the rendered
content within them"

That seems pretty clear to me.

--
Jim Dabell

Jul 20 '05 #2

P: n/a

"Jim Dabell" <ji********@jimdabell.com> wrote in message
news:XK********************@giganews.com...
Randall Sell wrote:

[snip]
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.
Yes, that's right.

<URL:http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width>

But I'd still like to achieve the effect.


#legend li {
display: block;
width: 10em;
float: left;
}
[snip]
So am I missing something? Or is this simply not officially supported and IE is just being nice?


Only if you consider ignoring the specification "being nice".

"[The 'width' property] Applies to: all elements but non-replaced inline
elements, table rows, and row groups"

"The width of a non-replaced inline element's boxes is that of the

rendered content within them"

That seems pretty clear to me.

--
Jim Dabell

Indeed, it is crystal clear when you find the reference. thanx
-randall
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.