Spacing of inline list items in Firefox

#1

Hi,

when displaying a list inline, Firefox adds a space between the items.
IE does not. I'd like to remove this space but I could not find where it
comes from.

To see what I mean copy the following code and try it in this page :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

<html>
<head>
<style type="text/css">
ul { list-style-type: none; }
ul li { display: inline; background: green; }
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Thanks.
v.

#2

vic wrote:

Quote:

when displaying a list inline, Firefox adds a space between the items.
IE does not. I'd like to remove this space but I could not find where
it comes from.

The same phenomenon appears on IE, at least on IE 8 in "standards" mode.

This is yet another symptom of the ancient "white space bug" in browsers or
a raffinated DOM-based standard feature, depending on your interpretation.
See
http://archivist.incutio.com/viewlist/css-discuss/70910?highlight=kuehn
for a descriptive and concise presentation of the issue. Note that the
phenomenon does not occur on IE in Quirks Mode.

My interpretation is, however, that the phenomenon is a bug. Note in
particular that it still occurs if you trim the markup to

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

so that there are just line breaks between the elements, and the phenomenon
disapperas if you remove the line breaks:

<ul>
<li>Coffee</li><li>Tea</li><li>Coca Cola</li>
</ul>

HTML specifications are silent about the effect of white space between
elements in situations where the syntax doesn't really allow anything
between elements. (For example, a <ul> element is allowed to contain <li>
elements, nothing more.) But I think it is unnatural to think that it should
have any effect; it should be treated as just HTML source formatting. Yet,
the modern trend is to think that when e.g. linebreaks are present between
elements, they are treated as anonymous inline elements. Under the dominance
of this madness, I don't think you have a choice - either accept the
phenomenon or remove the whitespace between elements

Quote:

To see what I mean copy the following code and try it in this page :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

Oh my... run... stay out of "w3schools". Check Usenet archives if you wish
to know why.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#3

vic wrote:

Quote:

Hi,

when displaying a list inline, Firefox adds a space between the items.
IE does not. I'd like to remove this space but I could not find where it
comes from.

Well actually that is not true, IE7 and below does not show the space
but IE8 does. It is caused by the whitespace that is not contained
withing the now inline elements, i.e., the carriage returns, tabs, and
spaces between your LI elements.

Quote:

To see what I mean copy the following code and try it in this page :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

html
head
style type="text/css"
ul { list-style-type: none; }
ul li { display: inline; background: green; }
/style
/head

body
ul
li>Coffee</li
li>Tea</li
li>Coca Cola</li
/ul
/body
/html

remove whitepsace

<li>Coffee</li><li>Tea</li><li>Coca Cola</li>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#4

Jukka K. Korpela wrote:

Quote:

The same phenomenon appears on IE, at least on IE 8 in "standards" mode.

I should have mentioned I tested using IE6.

Quote:

http://archivist.incutio.com/viewlist/css-discuss/70910?highlight=kuehn

Thanks for the link. It makes sense now. I wish CSS provided a way to
control this.

Quote:

Oh my... run... stay out of "w3schools". Check Usenet archives if you
wish to know why.

Humm I'll look into it.

v.

#5

"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> writes:

Quote:

vic wrote:
Hi,

when displaying a list inline, Firefox adds a space
between the items. IE does not. I'd like to remove this
space but I could not find where it comes from.
remove whitepsace

li>Coffee</li><li>Tea</li><li>Coca Cola</li

AIUI, it's the whitespace between elements that you need to remove, so
you can write

<ul

Quote:

li>Coffee</li
li>Tea</li
li>Cocoa</li
/ul

if you want to maintain something approaching readability.

--
Jón Fairbairn Jon.Fairbairn (AT) cl (DOT) cam.ac.uk

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Spacing of inline list items in Firefox

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Spacing of inline list items in Firefox - 10-04-2009 , 12:48 PM

Re: Spacing of inline list items in Firefox - 10-04-2009 , 02:31 PM

Re: Spacing of inline list items in Firefox - 10-04-2009 , 02:44 PM

Re: Spacing of inline list items in Firefox - 10-04-2009 , 07:03 PM

Re: Spacing of inline list items in Firefox - 10-05-2009 , 05:59 AM