Whitespace where I don't want whitespace!

Discussion in 'HTML' started by Oli Filth, Jan 17, 2005.

  1. Oli Filth

    Oli Filth Guest

    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, Jan 17, 2005
    #1
    1. Advertising

  2. Oli Filth

    Uncle Pirate Guest

    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
    Uncle Pirate, Jan 17, 2005
    #2
    1. Advertising

  3. Oli Filth

    Richard Guest

    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;">
    Richard, Jan 17, 2005
    #3
  4. Oli Filth

    Oli Filth Guest

    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
    Oli Filth, Jan 17, 2005
    #4
  5. 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
    Jukka K. Korpela, Jan 17, 2005
    #5
  6. Oli Filth

    Richard Guest

    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.
    Richard, Jan 17, 2005
    #6
  7. Oli Filth

    Oli Filth Guest

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

    >>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
    Oli Filth, Jan 17, 2005
    #7
  8. Oli Filth

    Toby Inkster Guest

    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
    Toby Inkster, Jan 17, 2005
    #8
  9. Oli Filth

    Oli Filth Guest

    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
    Oli Filth, Jan 17, 2005
    #9
  10. Oli Filth

    Uncle Pirate Guest

    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
    Uncle Pirate, Jan 17, 2005
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. M
    Replies:
    2
    Views:
    414
    Ignacio Machin \( .NET/ C# MVP \)
    Oct 7, 2003
  2. Replies:
    10
    Views:
    741
    Eric Brunel
    Dec 16, 2008
  3. MRAB
    Replies:
    3
    Views:
    384
  4. Replies:
    4
    Views:
    152
    Ted Zlatanov
    Sep 13, 2006
  5. pavi
    Replies:
    0
    Views:
    1,332
Loading...

Share This Page