HTML - Whitespace where I don't want whitespace!

01-17-2005, 01:08 AM

I'm using a list with inline <LI>s to create a horizontal nav-bar.

Take a look at the following test-page (not in IE):
http://olifilth.co.uk/28.htm

In the first example, each <LI> is defined on a separate line of the
HTML file, but because browsers (are supposed to) interpret newlines,
etc. as whitespace, a space character is inserted after every item,
causing the nav-bar to look messy.
i.e.:
<UL>
<LI>Home</LI>
<LI>Events</LI>
...
</UL>

The second example eliminates this problem, but only by placing all <LI>
items one one line of HTML code.
i.e.
<UL>
<LI>Home</LI><LI>Events</LI>...
</UL>

This is manageable in this example, but in the real version I have about
10 nav items, each inside an <A href="..."></A> with a reasonably long
URI. Do I really have to put the whole lot on one line of HTML if I want
to eliminate these whitespace characters?

--
Oli

Oli Filth

01-17-2005, 03:03 AM

Oli Filth wrote:
> http://olifilth.co.uk/28.htm
>
> In the first example, each <LI> is defined on a separate line of the
> HTML file, but because browsers (are supposed to) interpret newlines,
> etc. as whitespace, a space character is inserted after every item,
> causing the nav-bar to look messy.

Hmm. That space is outside the <li> element so should not be rendered,
I'd think; I've never noticed because I'm usually adjusting the padding
to increase the space. Try adjusting padding and margin for your li to
set the spacing you want. If you still cannot get the desired effect,
you can still indent your markup by doing:
<ul>
<li>list item 1</li
><li>list item 2</li>
</ul>

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked)

http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

01-17-2005, 06:05 AM

On Mon, 17 Jan 2005 01:08:20 GMT Oli Filth wrote:

> I'm using a list with inline <LI>s to create a horizontal nav-bar.

> Take a look at the following test-page (not in IE):
> http://olifilth.co.uk/28.htm

> In the first example, each <LI> is defined on a separate line of the
> HTML file, but because browsers (are supposed to) interpret newlines,
> etc. as whitespace, a space character is inserted after every item,
> causing the nav-bar to look messy.

> <LI>Home</LI>
> <LI>Events</LI>
> ...

> The second example eliminates this problem, but only by placing all
> <LI>
> items one one line of HTML code.
> i.e.

> <LI>Home</LI><LI>Events</LI>...

> This is manageable in this example, but in the real version I have
> about
> 10 nav items, each inside an <A href="..."></A> with a reasonably long
> URI. Do I really have to put the whole lot on one line of HTML if I
> want
> to eliminate these whitespace characters?

> --
> Oli

<head>
<script type="text/css">

Li { margin: 10px 10px 10px 10 px;}

</script>
</head>

End of problem.
What that does is assign a 10px margin around all 4 edges.
You can change which ever to suit your needs.
or if you prefer....margin-right:10px;
or even <li style="margin-right:10px;">

01-17-2005, 09:10 AM

Richard wrote:
> <head>
> <script type="text/css">
>
> Li { margin: 10px 10px 10px 10 px;}
>
> </script>
> </head>
>
>
> End of problem.
> What that does is assign a 10px margin around all 4 edges.
> You can change which ever to suit your needs.
> or if you prefer....margin-right:10px;
> or even <li style="margin-right:10px;">
>
>
>

Thank you for your input, but how is that "end of problem"? Did you
actually try it? See updated http://olifilth.co.uk/28.htm.

Margin does *not* fix this. Padding gets closer, but the white-space
character still exists, so it's still off-centre. I could fiddle with
padding-left and padding-right, but that's just an arse, cause if font
size changes, I'll have to work it all out again...

--
Oli

01-17-2005, 10:04 AM

Uncle Pirate <> wrote:

> That space is outside the <li> element so should not be rendered,
> I'd think;

This is a grey area, but I won't go into the finer SGML points, since
browsers don't care about them. (Should even <li>foo </li> be any different
from <li>foo</li>?) The practical thing is that browsers have a horrendous
number of bugs in processing white space characters, and this seems to be
one of them. When you wish to use display: inline for a list, then
<ul>
<li>foo</li>
<li>bar</li>
</ul>
(i.e. even without spaces, just linebreaks between the li elements)
is _in practice_ different from
<ul><li>foo</li><li>bar</li></ul>

> I've never noticed because I'm usually adjusting the padding
> to increase the space.

Some spacing is really needed for readability, but I can understand the
desire to avoid getting spacing _without asking for it_. So I would start
from writing the ul element on one line in HTML source (or perhaps using
line breaks instead of spaces somewhere, e.g.
<li>foo
bar</li>
instead on <li>foo bar</li>) and then add some spacing in CSS, e.g.
li { padding: 1em 0; }
(I wouldn't use much less spacing. This is after all a navigation bar,
where items should be clearly distinct, not a squeezing contest.)

> If you still cannot get the desired effect,
> you can still indent your markup by doing:
> <ul>
> <li>list item 1</li
> ><li>list item 2</li> </ul>

That would be formally correct, but browsers that don't get SGML parsing
right (which is mostly what this is all about) might get this particular
parsing issue wrong too - especially since it is not common to put
whitespace inside an end tag.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

01-17-2005, 03:15 PM

On Mon, 17 Jan 2005 09:10:39 GMT Oli Filth wrote:

> Richard wrote:
>> <head>
>> <script type="text/css">

>> Li { margin: 10px 10px 10px 10 px;}

>> </script>
>> </head>

>> End of problem.
>> What that does is assign a 10px margin around all 4 edges.
>> You can change which ever to suit your needs.
>> or if you prefer....margin-right:10px;
>> or even <li style="margin-right:10px;">

> Thank you for your input, but how is that "end of problem"? Did you
> actually try it? See updated http://olifilth.co.uk/28.htm.

> Margin does *not* fix this. Padding gets closer, but the white-space
> character still exists, so it's still off-centre. I could fiddle with
> padding-left and padding-right, but that's just an arse, cause if font
> size changes, I'll have to work it all out again...

I'd go with the padding version.
You're never gonna truly get everything perfectly center anyway.
Unless you use a monospace font.
Your other choice then is to either use divisions or table for the layout of
the items.

01-17-2005, 06:51 PM

Jukka K. Korpela wrote:
>
> This is a grey area, but I won't go into the finer SGML points, since
> browsers don't care about them. (Should even <li>foo </li> be any different
> from <li>foo</li>?)
> The practical thing is that browsers have a horrendous
> number of bugs in processing white space characters, and this seems to be
> one of them. When you wish to use display: inline for a list, then
> <ul>
> <li>foo</li>
> <li>bar</li>
> </ul>
> (i.e. even without spaces, just linebreaks between the li elements)
> is _in practice_ different from
> <ul><li>foo</li><li>bar</li></ul>
>

From what I've read in the HTML 4.01 specs
(http://www.w3.org/TR/html4/struct/text.html#h-9.1 and
http://www.w3.org/TR/html4/appendix/...s-line-breaks), a
user-agent *must* ignore white-space directly after an opening tag, and
directly after a closing tag, i.e. <LI> foo</LI> = <LI>foo</LI>.

All other whitespace should basically be collapsed to a single space
character. So in my example page, IE gets it wrong, and Firefox and
Opera get it right. Unfortunately, this is the problem!!

> Some spacing is really needed for readability, but I can understand the
> desire to avoid getting spacing _without asking for it_. So I would start
> from writing the ul element on one line in HTML source (or perhaps using
> line breaks instead of spaces somewhere, e.g.
> <li>foo
> bar</li>
> instead on <li>foo bar</li>) and then add some spacing in CSS, e.g.
> li { padding: 1em 0; }
> (I wouldn't use much less spacing. This is after all a navigation bar,
> where items should be clearly distinct, not a squeezing contest.)

It's ok

, the example page I gave only had items with zero padding so
as to make the whitespace problem more apparent. However, with
reasonably small padding values it still looks bad.

>>If you still cannot get the desired effect,
>>you can still indent your markup by doing:
>><ul>
>> <li>list item 1</li
>> ><li>list item 2</li> </ul>
>
>

Unfortunately, IMHO that's almost as bad as putting it all on one line!
I'd like to make my HTML as neat as humanly possible, hence my desire to
put each <LI></LI> on a separate line.

--
Oli

01-17-2005, 07:45 PM

Oli Filth wrote:

> user-agent *must* ignore white-space directly after an opening tag, and
> directly after a closing tag
^^^^^ before

But that's only line breaks.

It's stupid anyway. How should this be rendered?

<p><span>Hello</span>
World.</p>

There should be a space between "Hello" and "World", right?

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

01-17-2005, 08:22 PM

Toby Inkster wrote:
> Oli Filth wrote:
>
>
>>user-agent *must* ignore white-space directly after an opening tag, and
>>directly after a closing tag
>
> ^^^^^ before

Whoops, typo! yes, _before_ closing tags.

>
> But that's only line breaks.

You're right, in these circumstances, it says that UAs shouldn't render
line-breaks only. But it also says that authors shouldn't rely on UAs to
render *any* white-space characters in these circumstances.

>
> It's stupid anyway. How should this be rendered?
>
> <p><span>Hello</span>
> World.</p>
>
> There should be a space between "Hello" and "World", right?
>

Yes, and there will be, according to the specs. The line-break condenses
to a space character, because it's after a closing tag.

--
Oli

01-17-2005, 08:47 PM

Oli Filth wrote:

>>> If you still cannot get the desired effect, you can still indent your
>>> markup by doing:
>>> <ul>
>>> <li>list item 1</li
>>> ><li>list item 2</li> </ul>
>>
>>
>>
>
> Unfortunately, IMHO that's almost as bad as putting it all on one line!
> I'd like to make my HTML as neat as humanly possible, hence my desire to
> put each <LI></LI> on a separate line.

I've gotten used to doing the above in markup to keep my indentions with
<a href="somewhere"
><img src="somefile"></a> or >some text here</a>
Although the space is not wanted if I place a line break between the <a>
and <img>, it is IMO correctly rendered for an in-line element. Come to
think about it, when using css to make your <li> in-line, it may be
correct to place the white space there as you are seeing.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked)

http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

01-17-2005, 03:03 AM	#2
Uncle Pirate Posts: n/a	Re: Whitespace where I don't want whitespace! Oli Filth wrote: > http://olifilth.co.uk/28.htm > > In the first example, each <LI> is defined on a separate line of the > HTML file, but because browsers (are supposed to) interpret newlines, > etc. as whitespace, a space character is inserted after every item, > causing the nav-bar to look messy. Hmm. That space is outside the <li> element so should not be rendered, I'd think; I've never noticed because I'm usually adjusting the padding to increase the space. Try adjusting padding and margin for your li to set the spacing you want. If you still cannot get the desired effect, you can still indent your markup by doing: <ul> <li>list item 1</li ><li>list item 2</li> </ul> -- Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB '94 1500 Vulcan (now wrecked) http://motorcyclefun.org/Dcp_2068c.jpg A zest for living must include a willingness to die. - R.A. Heinlein

01-17-2005, 06:05 AM	#3
Richard Posts: n/a	Re: Whitespace where I don't want whitespace! On Mon, 17 Jan 2005 01:08:20 GMT Oli Filth wrote: > I'm using a list with inline <LI>s to create a horizontal nav-bar. > Take a look at the following test-page (not in IE): > http://olifilth.co.uk/28.htm > In the first example, each <LI> is defined on a separate line of the > HTML file, but because browsers (are supposed to) interpret newlines, > etc. as whitespace, a space character is inserted after every item, > causing the nav-bar to look messy. > <LI>Home</LI> > <LI>Events</LI> > ... > The second example eliminates this problem, but only by placing all > <LI> > items one one line of HTML code. > i.e. > <LI>Home</LI><LI>Events</LI>... > This is manageable in this example, but in the real version I have > about > 10 nav items, each inside an <A href="..."></A> with a reasonably long > URI. Do I really have to put the whole lot on one line of HTML if I > want > to eliminate these whitespace characters? > -- > Oli <head> <script type="text/css"> Li { margin: 10px 10px 10px 10 px;} </script> </head> End of problem. What that does is assign a 10px margin around all 4 edges. You can change which ever to suit your needs. or if you prefer....margin-right:10px; or even <li style="margin-right:10px;">

01-17-2005, 09:10 AM	#4
Oli Filth Posts: n/a	Re: Whitespace where I don't want whitespace! Richard wrote: > <head> > <script type="text/css"> > > Li { margin: 10px 10px 10px 10 px;} > > </script> > </head> > > > End of problem. > What that does is assign a 10px margin around all 4 edges. > You can change which ever to suit your needs. > or if you prefer....margin-right:10px; > or even <li style="margin-right:10px;"> > > > Thank you for your input, but how is that "end of problem"? Did you actually try it? See updated http://olifilth.co.uk/28.htm. Margin does not fix this. Padding gets closer, but the white-space character still exists, so it's still off-centre. I could fiddle with padding-left and padding-right, but that's just an arse, cause if font size changes, I'll have to work it all out again... -- Oli

01-17-2005, 10:04 AM	#5
Jukka K. Korpela Posts: n/a	Re: Whitespace where I don't want whitespace! Uncle Pirate <> wrote: > That space is outside the <li> element so should not be rendered, > I'd think; This is a grey area, but I won't go into the finer SGML points, since browsers don't care about them. (Should even <li>foo </li> be any different from <li>foo</li>?) The practical thing is that browsers have a horrendous number of bugs in processing white space characters, and this seems to be one of them. When you wish to use display: inline for a list, then <ul> <li>foo</li> <li>bar</li> </ul> (i.e. even without spaces, just linebreaks between the li elements) is _in practice_ different from <ul><li>foo</li><li>bar</li></ul> > I've never noticed because I'm usually adjusting the padding > to increase the space. Some spacing is really needed for readability, but I can understand the desire to avoid getting spacing _without asking for it_. So I would start from writing the ul element on one line in HTML source (or perhaps using line breaks instead of spaces somewhere, e.g. <li>foo bar</li> instead on <li>foo bar</li>) and then add some spacing in CSS, e.g. li { padding: 1em 0; } (I wouldn't use much less spacing. This is after all a navigation bar, where items should be clearly distinct, not a squeezing contest.) > If you still cannot get the desired effect, > you can still indent your markup by doing: > <ul> > <li>list item 1</li > ><li>list item 2</li> </ul> That would be formally correct, but browsers that don't get SGML parsing right (which is mostly what this is all about) might get this particular parsing issue wrong too - especially since it is not common to put whitespace inside an end tag. -- Yucca, http://www.cs.tut.fi/~jkorpela/ Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

01-17-2005, 03:15 PM	#6
Richard Posts: n/a	Re: Whitespace where I don't want whitespace! On Mon, 17 Jan 2005 09:10:39 GMT Oli Filth wrote: > Richard wrote: >> <head> >> <script type="text/css"> >> Li { margin: 10px 10px 10px 10 px;} >> </script> >> </head> >> End of problem. >> What that does is assign a 10px margin around all 4 edges. >> You can change which ever to suit your needs. >> or if you prefer....margin-right:10px; >> or even <li style="margin-right:10px;"> > Thank you for your input, but how is that "end of problem"? Did you > actually try it? See updated http://olifilth.co.uk/28.htm. > Margin does not fix this. Padding gets closer, but the white-space > character still exists, so it's still off-centre. I could fiddle with > padding-left and padding-right, but that's just an arse, cause if font > size changes, I'll have to work it all out again... I'd go with the padding version. You're never gonna truly get everything perfectly center anyway. Unless you use a monospace font. Your other choice then is to either use divisions or table for the layout of the items.

01-17-2005, 01:08 AM	#1
	Whitespace where I don't want whitespace! I'm using a list with inline <LI>s to create a horizontal nav-bar. Take a look at the following test-page (not in IE): http://olifilth.co.uk/28.htm In the first example, each <LI> is defined on a separate line of the HTML file, but because browsers (are supposed to) interpret newlines, etc. as whitespace, a space character is inserted after every item, causing the nav-bar to look messy. i.e.: <UL> <LI>Home</LI> <LI>Events</LI> ... </UL> The second example eliminates this problem, but only by placing all <LI> items one one line of HTML code. i.e. <UL> <LI>Home</LI><LI>Events</LI>... </UL> This is manageable in this example, but in the real version I have about 10 nav items, each inside an <A href="..."></A> with a reasonably long URI. Do I really have to put the whole lot on one line of HTML if I want to eliminate these whitespace characters? -- Oli Oli Filth

01-17-2005, 06:51 PM	#7
Oli Filth Posts: n/a	Re: Whitespace where I don't want whitespace! Jukka K. Korpela wrote: > > This is a grey area, but I won't go into the finer SGML points, since > browsers don't care about them. (Should even <li>foo </li> be any different > from <li>foo</li>?) > The practical thing is that browsers have a horrendous > number of bugs in processing white space characters, and this seems to be > one of them. When you wish to use display: inline for a list, then > <ul> > <li>foo</li> > <li>bar</li> > </ul> > (i.e. even without spaces, just linebreaks between the li elements) > is _in practice_ different from > <ul><li>foo</li><li>bar</li></ul> > From what I've read in the HTML 4.01 specs (http://www.w3.org/TR/html4/struct/text.html#h-9.1 and http://www.w3.org/TR/html4/appendix/...s-line-breaks), a user-agent must ignore white-space directly after an opening tag, and directly after a closing tag, i.e. <LI> foo</LI> = <LI>foo</LI>. All other whitespace should basically be collapsed to a single space character. So in my example page, IE gets it wrong, and Firefox and Opera get it right. Unfortunately, this is the problem!! > Some spacing is really needed for readability, but I can understand the > desire to avoid getting spacing _without asking for it_. So I would start > from writing the ul element on one line in HTML source (or perhaps using > line breaks instead of spaces somewhere, e.g. > <li>foo > bar</li> > instead on <li>foo bar</li>) and then add some spacing in CSS, e.g. > li { padding: 1em 0; } > (I wouldn't use much less spacing. This is after all a navigation bar, > where items should be clearly distinct, not a squeezing contest.) It's ok , the example page I gave only had items with zero padding so as to make the whitespace problem more apparent. However, with reasonably small padding values it still looks bad. >>If you still cannot get the desired effect, >>you can still indent your markup by doing: >><ul> >> <li>list item 1</li >> ><li>list item 2</li> </ul> > > Unfortunately, IMHO that's almost as bad as putting it all on one line! I'd like to make my HTML as neat as humanly possible, hence my desire to put each <LI></LI> on a separate line. -- Oli

01-17-2005, 07:45 PM	#8
Toby Inkster Posts: n/a	Re: Whitespace where I don't want whitespace! Oli Filth wrote: > user-agent must ignore white-space directly after an opening tag, and > directly after a closing tag ^^^^^ before But that's only line breaks. It's stupid anyway. How should this be rendered? <p><span>Hello</span> World.</p> There should be a space between "Hello" and "World", right? -- Toby A Inkster BSc (Hons) ARCS Contact Me ~ http://tobyinkster.co.uk/contact

01-17-2005, 08:22 PM	#9
Oli Filth Posts: n/a	Re: Whitespace where I don't want whitespace! Toby Inkster wrote: > Oli Filth wrote: > > >>user-agent must ignore white-space directly after an opening tag, and >>directly after a closing tag > > ^^^^^ before Whoops, typo! yes, _before_ closing tags. > > But that's only line breaks. You're right, in these circumstances, it says that UAs shouldn't render line-breaks only. But it also says that authors shouldn't rely on UAs to render any white-space characters in these circumstances. > > It's stupid anyway. How should this be rendered? > > <p><span>Hello</span> > World.</p> > > There should be a space between "Hello" and "World", right? > Yes, and there will be, according to the specs. The line-break condenses to a space character, because it's after a closing tag. -- Oli

01-17-2005, 08:47 PM	#10
Uncle Pirate Posts: n/a	Re: Whitespace where I don't want whitespace! Oli Filth wrote: >>> If you still cannot get the desired effect, you can still indent your >>> markup by doing: >>> <ul> >>> <li>list item 1</li >>> ><li>list item 2</li> </ul> >> >> >> > > Unfortunately, IMHO that's almost as bad as putting it all on one line! > I'd like to make my HTML as neat as humanly possible, hence my desire to > put each <LI></LI> on a separate line. I've gotten used to doing the above in markup to keep my indentions with <a href="somewhere" ><img src="somefile"></a> or >some text here</a> Although the space is not wanted if I place a line break between the <a> and <img>, it is IMO correctly rendered for an in-line element. Come to think about it, when using css to make your <li> in-line, it may be correct to place the white space there as you are seeing. -- Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html Webmaster/Computer Center Manager, NMSU at Alamogordo Cooordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB '94 1500 Vulcan (now wrecked) http://motorcyclefun.org/Dcp_2068c.jpg A zest for living must include a willingness to die. - R.A. Heinlein

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search