468,771 Members | 1,812 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,771 developers. It's quick & easy.

Horizontal Navigation bar and fixed width

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
2 11117
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

"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.

Similar topics

4 posts views Thread by Roderik | last post: by
1 post views Thread by Bryan | last post: by
14 posts views Thread by Dave | last post: by
2 posts views Thread by Benny Raymond | last post: by
1 post views Thread by Paul | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.