Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Whitespace where I don't want whitespace!

Reply
Thread Tools

Whitespace where I don't want whitespace!

 
 
Oli Filth
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
 
 
 
Uncle Pirate
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
 
 
 
Richard
Guest
Posts: n/a
 
      01-17-2005
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;">



 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      01-17-2005
Uncle Pirate <(E-Mail Removed)> 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


 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      01-17-2005
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.


 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      01-17-2005
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

 
Reply With Quote
 
Oli Filth
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
Uncle Pirate
Guest
Posts: n/a
 
      01-17-2005
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Splitting text at whitespace but keeping the whitespace in thereturned list MRAB Python 3 01-26-2010 11:36 PM
Structure using whitespace vs logical whitespace cmdrrickhunter@yaho.com Python 10 12-16-2008 03:51 PM
I want to output all of my STDOUT to a single line....dont want to scroll seancsnyder@gmail.com Perl Misc 4 09-13-2006 04:32 PM
I want to create a link "e-mail this page to a friend" on clicking this link i want to send the URL of that current page to a friend pavi Javascript 0 01-13-2006 12:10 PM
Hi I have one web application and i want to get the number of users who are currently accessing the application. Also I want to get the user details of each user, which is stored in a database. How can I do this? Pls help. Getting No: and anu Java 11 05-12-2005 03:25 PM



Advertisments