Whitespace where I don't want whitespace!

O

Oli Filth

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

Uncle Pirate

Oli said:
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:
<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
 
R

Richard

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.



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


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?

<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;">
 
O

Oli Filth

Richard said:
<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...
 
J

Jukka K. Korpela

Uncle Pirate said:
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
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:

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

Richard

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

Oli Filth

Jukka said:
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/notes.html#notes-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.

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

Toby Inkster

Oli said:
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?
 
O

Oli Filth

Toby said:
Oli Filth wrote:



^^^^^ 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.
 
U

Uncle Pirate

Oli said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top