Horizontal Navigation bar and fixed width

#1 July 20th, 2005, 09:22 PM

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

#2 July 20th, 2005, 09:22 PM

Randall Sell wrote:

[snip][color=blue]
> 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.[/color]

Yes, that's right.

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

[color=blue]
> But I'd still like to achieve the effect.[/color]

#legend li {
display: block;
width: 10em;
float: left;
}

[snip][color=blue]
> So am I missing something? Or is this simply not officially supported and
> IE is just being nice?[/color]

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

#3 July 20th, 2005, 09:23 PM

"Jim Dabell" <jim-usenet@jimdabell.com> wrote in message
news:XKOdnU2y-6AGwOmiRVn-sA@giganews.com...[color=blue]
> Randall Sell wrote:
>
> [snip][color=green]
> > 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.[/color]
>
> Yes, that's right.
>
> <URL:http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width>
>
>[color=green]
> > But I'd still like to achieve the effect.[/color]
>
> #legend li {
> display: block;
> width: 10em;
> float: left;
> }
>
>
> [snip][color=green]
> > So am I missing something? Or is this simply not officially supported[/color][/color]
and[color=blue][color=green]
> > IE is just being nice?[/color]
>
> 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[/color]
rendered[color=blue]
> content within them"
>
> That seems pretty clear to me.
>
> --
> Jim Dabell
>[/color]
Indeed, it is crystal clear when you find the reference. thanx
-randall

What is Bytes?

Popular Articles