The natural space between inline list items?

[dorayme]

CSS:

ul {margin:0;padding:0;}
li {list-style-type:none;margin:0;padding:0;display:inline;}

HTML:

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

There is, naturally a space between the text of the links. Could
someone please remind me how to find out how many ems this is in
any particular browser without trial and error, given no more
than the above css and html. How standard is this space among
browsers? Or is it too browser dependent?

I can get this in Safari:

Item1Item2Item3

by

li {
margin-left: -0.2em;
margin-right: -0.2em;
}

Not that I want to end up removing the space! I am thinking about
this to better control something a bit more complicated to do
with borders and inline lists. I have a guess solution which
works not bad on my browsers, but be nice to know any deeper
answer to above. I get hazy about the issue ;-)... the exact
"whereabouts" or any space reserved or fossilized for the missing
list item marker and other things has always slightly puzzled
me...

 

[Mark Parnell]

Deciding to do something for the good of humanity, dorayme

There is, naturally a space between the text of the links. Could
someone please remind me how to find out how many ems this is in
any particular browser without trial and error, given no more
than the above css and html.

It *should* be simply one space character, same as if you had
<span>Item1</span> <span>Item2</span> etc. How many ems that is will
likely depend on the font. And of course that doesn't mean that browsers
will actually behave that way. :-\

 

[Els]

CSS:

ul {margin:0;padding:0;}
li {list-style-type:none;margin:0;padding:0;display:inline;}

HTML:

<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>

There is, naturally a space between the text of the links. Could
someone please remind me how to find out how many ems this is in
any particular browser without trial and error, given no more
than the above css and html. How standard is this space among
browsers? Or is it too browser dependent?

I can get this in Safari:

Item1Item2Item3

by

li {
margin-left: -0.2em;
margin-right: -0.2em;
}

Not that I want to end up removing the space! I am thinking about
this to better control something a bit more complicated to do
with borders and inline lists. I have a guess solution which
works not bad on my browsers, but be nice to know any deeper
answer to above. I get hazy about the issue ;-)... the exact
"whereabouts" or any space reserved or fossilized for the missing
list item marker and other things has always slightly puzzled
me...

Not sure if this is what you are looking for, but if you write the
list without space or newline between the list items, like so:
<ul><li>Item1</li><li>Item2</li><li>Item3</li></ul>, the visual space
between the items will also disappear.
Then, with margin-left/right, you can set the exact space you like.

 

[dorayme]

....

Not sure if this is what you are looking for, but if you write the
list without space or newline between the list items, like so:
<ul><li>Item1</li><li>Item2</li><li>Item3</li></ul>, the visual space
between the items will also disappear.
Then, with margin-left/right, you can set the exact space you like.

This is exactly what I want! Thanks for this Els...

I confess, when I read this I did not believe it for a sec...
what! But you are right. It is most interesting and news. I
guess I don't know about whitespace in css sheets affecting the
instructions. Thought browsers ignored more than 1 whitespace,
and so probably they did not care about 0 whitespace as long as
all the : and ; and { were there right. I know some whitespace
is needed in some specs to fix paths like "body p {...}" to tell
style paras that are children of body... that sort of thing...
and I know about white space in pre in html and some trouble with
Mac IE with whitespace... But what you are saying, I did not know.

 

[Mark Parnell]

Deciding to do something for the good of humanity, dorayme

I
guess I don't know about whitespace in css sheets affecting the
instructions.

It doesn't, it's the whitespace in the HTML.

Thought browsers ignored more than 1 whitespace,

They don't ignore it, they just trim it down to one, regardless of how
many there are. But there is certainly a difference between zero and
one.

 

[dorayme]

It *should* be simply one space character, same as if you had
<span>Item1</span> <span>Item2</span> etc.

Yes, you are right. Els has suggested a way to zero things so I
can set up my own margins and stuff... I was a bit wide eyed at
that one!

(I recall you helping me zero things once before in relation to a
different prob when you suggested * margin:0;padding:0 at the
start of a css sheet... it was sufficient to solve my problem
though I did not need in the end to implement so drastic a
measure, it helped me track my problem down better!)

 

[dorayme]

Deciding to do something for the good of humanity, dorayme


It doesn't, it's the whitespace in the HTML.


They don't ignore it, they just trim it down to one, regardless of how
many there are. But there is certainly a difference between zero and
one.

Yes, my mistake... oops and bugger it! How can one take something
back quickly?

I was too happy to get it zeroed, it all makes more sense to me
now, being inline, the spaces in the html count... not the css. I
am still grateful and missed the obvious. Martians are like that.

Els of course would never say anything, she is European and nice.
You are a fellow Aussie and brutally frank. I like both, so don't
worry.

 

[Jukka K. Korpela]

Not sure if this is what you are looking for, but if you write the
list without space or newline between the list items, like so:
<ul><li>Item1</li><li>Item2</li><li>Item3</li></ul>, the visual space
between the items will also disappear.

This is known as white space bug in browsers: if you have a line break
between, say, </li> and <li>, they incorrectly treat the line break as
equivalent to a space. By HTML (SGML) rules, a line break shall be ignored
in such a context. Worse still, browsers treat the space they construct as
appearing inside the li element, as if you had
<ul><li>Item1 </li><li>Item2 </li><li>Item3 </li></ul>
(This is all wrong, since whitespace between elements should be ignored.)

There's probably little hope of having the bug ever fixed in popular
browsers, so it is best to use the suggested compact notation in problematic
cases.

Then, with margin-left/right, you can set the exact space you like.

With the usual CSS caveats, yes.

 

[dorayme]

This is known as white space bug in browsers: if you have a line break
between, say, </li> and <li>, they incorrectly treat the line break as
equivalent to a space. By HTML (SGML) rules, a line break shall be ignored
in such a context. Worse still, browsers treat the space they construct as
appearing inside the li element, as if you had
<ul><li>Item1 </li><li>Item2 </li><li>Item3 </li></ul>
(This is all wrong, since whitespace between elements should be ignored.)

There's probably little hope of having the bug ever fixed in popular
browsers, so it is best to use the suggested compact notation in problematic
cases.


With the usual CSS caveats, yes.

Right, seems I must have read something in HTML and CSS specs
once and just swallowed it whole.

I have indeed now set the space exactly as I like it and am well
pleased, a little problem I have been vaguely messing about with
for ages...

The only little drawback, easily lived with, is this: it does
not look so tidy in the html now (my actual list is much longer
and more complex with title and links).

I rather liked the orderliness of the line breaks before in the
HTML. But the price is small considering the sheer beauty of the
final result. (at least my editor wraps my lines to view them). I
now have a satisfyingly exact spacing between my border
separators and the text list items that maintain the ratios over
different font sizes as set by users...

 

[Els]

dorayme wrote:

[list items without whitespace or line-breaks]

The only little drawback, easily lived with, is this: it does
not look so tidy in the html now (my actual list is much longer
and more complex with title and links).
Option:
<ul
<li>Item1</li
<li>Item2</li
<li>Item3</li
</ul>

(only indented here to avoid the > characters to be taken as quote
marks)

 

[dorayme]

dorayme wrote:

[list items without whitespace or line-breaks]

The only little drawback, easily lived with, is this: it does
not look so tidy in the html now (my actual list is much longer
and more complex with title and links).

Option:
<ul
><li>Item1</li
><li>Item2</li
><li>Item3</li
></ul>

(only indented here to avoid the > characters to be taken as quote
marks)

A good sharp idea! Perhaps even <ul> complete on one line and a
little anomaly in first <li> line starting normally. The bits
between the list items are the important thing to zero for me.

<li>Item2</li
<li>Item3</li>

</ul>

Anyway, both these seem to work fine and I already have done the
latter. If any problems show up, I will do the former. And if any
problems show up still, I'm off back to Mars...

 

[Els]

dorayme wrote:

[list items without whitespace or line-breaks]

The only little drawback, easily lived with, is this: it does
not look so tidy in the html now (my actual list is much longer
and more complex with title and links).
Option:
<ul
<li>Item1</li
<li>Item2</li
<li>Item3</li
</ul>

(only indented here to avoid the > characters to be taken as quote
marks)

I've used that trick too over the years. I do usually try to find a
better place to break but it can be difficult with lists, especially.
I've not tried validating any like that. Does it validate or does the
validator complain about the space after</li?

Validator's fine with it.

I know I could just try
it but I haven't even finished my first cup of coffee this morning.

We have advanced time technology here in Europe: it's 3.48pm already
;-)

 

[Alan J. Flavell]

Validator's fine with it.

By definition, yes. If the so-called validator complained, it would
prove that it wasn't genuinely a validator!

 

[Stan McCann]

This is exactly what I want! Thanks for this Els...

I confess, when I read this I did not believe it for a sec...
what! But you are right. It is most interesting and news. I
guess I don't know about whitespace in css sheets affecting the
instructions. Thought browsers ignored more than 1 whitespace,
and so probably they did not care about 0 whitespace as long as
all the : and ; and { were there right. I know some whitespace
is needed in some specs to fix paths like "body p {...}" to tell
style paras that are children of body... that sort of thing...
and I know about white space in pre in html and some trouble with
Mac IE with whitespace... But what you are saying, I did not know.

I learned this white space lesson long ago when putting pictures in
table cells. For a long time, I couldn't figure out why pictures
weren't right up against the border. I learned the difference between

<table>
<tr>
<td>
<img src=...
and
<table>
<tr>
<td><img src=...
the second instance removing the slight space from the border.

 

[Stan McCann]

dorayme wrote:

[list items without whitespace or line-breaks]

The only little drawback, easily lived with, is this: it does
not look so tidy in the html now (my actual list is much longer
and more complex with title and links).
Option:
<ul
<li>Item1</li
<li>Item2</li
<li>Item3</li
</ul>

(only indented here to avoid the > characters to be taken as quote
marks)

I've used that trick too over the years. I do usually try to find a
better place to break but it can be difficult with lists, especially.
I've not tried validating any like that. Does it validate or does the
validator complain about the space after</li? I know I could just try
it but I haven't even finished my first cup of coffee this morning.

 

[dorayme]

....

I learned this white space lesson long ago when putting pictures in
table cells. For a long time, I couldn't figure out why pictures
weren't right up against the border.

Yes, that is interesting. I probably would have missed this one
too. How can one bumble through life like this? Easy, by not
being too fussy perhaps?

Tell you the truth, am doing a new website for an organization
that is so busy they have not found time to send me the materials
I need to finish the job (time has slipped and my efforts to
encourage the flow have not yielded results). So I have gotten
worried and have compensated by fussing over fine details -
making like I am progressing! Things they would never notice in a
million years anyway. I did have a reasonably practical solution
to my "problem". But I must say, it gives me great satisfaction
to know an exact solution.