Space between listitems

Hi,

I have a list:
<ul>
<li>Li 1 - blablablablabla</div>
<li>Li 2 - blablablablabla</div>
<li>Li 3 - blablablablabla</div>
<li>Li 4 - blablablablabla</div>
<li>Li 5 - blablablablabla</div>
</ul>
When I change the style to:
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; font-family:Arial,Helvetica,sans-
serif; font-size:12px; }
in IE7 there is still some space between the list items.

If I do the same thing with divs:
<div>Div 1 - blablablablabla</div>
<div>Div 2 - blablablablabla</div>
<div>Div 3 - blablablablabla</div>
<div>Div 4 - blablablablabla</div>
<div>Div 5 - blablablablabla</div>
With style:
div { margin: 0px; padding: 0px; font-family:Arial,Helvetica,sans-
serif; font-size:12px; }
Then the items are much closer to one another than with the list (in
IE7).

How can I change the css of the listitems or the list so that these
items are as close to one another as with the divs in IE7?

dorayme

Guest

n/a Posts

June 27th, 2008
07:19 PM
#2

Re: Space between listitems

In article
<6013dd0c-6694-4570-9883-d20ab95f8a51@s50g2000hsb.googlegroups.com>,
Veerle <veerleverbr@hotmail.comwrote:

Quote:

Originally Posted by

Hi,
>
I have a list:
<ul>
<li>Li 1 - blablablablabla</div>
<li>Li 2 - blablablablabla</div>
<li>Li 3 - blablablablabla</div>
<li>Li 4 - blablablablabla</div>
<li>Li 5 - blablablablabla</div>
</ul>
When I change the style to:
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; font-family:Arial,Helvetica,sans-
serif; font-size:12px; }
in IE7 there is still some space between the list items.
>
If I do the same thing with divs:
<div>Div 1 - blablablablabla</div>
<div>Div 2 - blablablablabla</div>
<div>Div 3 - blablablablabla</div>
<div>Div 4 - blablablablabla</div>
<div>Div 5 - blablablablabla</div>
With style:
div { margin: 0px; padding: 0px; font-family:Arial,Helvetica,sans-
serif; font-size:12px; }
Then the items are much closer to one another than with the list (in
IE7).
>
How can I change the css of the listitems or the list so that these
items are as close to one another as with the divs in IE7?

A URL would help on this.

I hope your end tags on the list above are typos just in this post.

It is sometimes necessary to remove whitespace or carriage returns
between closing list tag and opening next. You can still be rasonably
tidy in your source by something like:

<ul>
<li>Li 1 - blablablablabla</li><
li>Li 2 - blablablablabla</li><
li>Li 3 - blablablablabla</li><
li>Li 4 - blablablablabla...

where the carriage returns do not affect things.

--
dorayme

dorayme

Guest

n/a Posts

June 27th, 2008
07:19 PM
#3

Re: Space between listitems

In article
<doraymeRidThis-F97FB2.17582017062008@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.auwrote:

Quote:

Originally Posted by

<ul>
<li>Li 1 - blablablablabla</li><
li>Li 2 - blablablablabla</li><
li>Li 3 - blablablablabla</li><
li>Li 4 - blablablablabla...

my typos, this is better:

<ul>
<li>item</li

Quote:

Originally Posted by

><li>item</li
><li>item</li
><li>item</li>

</ul>

--
dorayme

Jukka K. Korpela

Guest

n/a Posts

June 27th, 2008
07:19 PM
#4

Re: Space between listitems

Scripsit Veerle:

Quote:

Originally Posted by

I have a list:
<ul>
<li>Li 1 - blablablablabla</div>

You have invalid markup then. If you had posted a URL, we would know
whether the error is on page you tested or in your attempt to copy a
fragment from it.

Quote:

Originally Posted by

When I change the style to:
ul { margin: 0px; padding: 0px; }
li { margin: 0px; padding: 0px; font-family:Arial,Helvetica,sans-
serif; font-size:12px; }
in IE7 there is still some space between the list items.

You get 100 minus points for setting font size in pixels and 150
additional minus points for setting it to a grossly small value.

Quote:

Originally Posted by

How can I change the css of the listitems or the list so that these
items are as close to one another as with the divs in IE7?

There is no difference if font family and font size are not set. It
appears when _either_ of them is set. This is somewhat weird. I suppose
IE uses some default line height for list items in this case, different
from the overall line height.

Anyway, the problem disappears if I set
* { line-height: 1.25; }
which is a good idea in any case. The specific value should of course be
selected according to the font face, line length, and other relevant
factors.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/