Prev: ie6/firefox box model differences?
Next: Form
From: Veerle on 17 Jun 2008 01:50
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?
From: dorayme on 17 Jun 2008 03:58
In article
<6013dd0c-6694-4570-9883-d20ab95f8a51(a)s50g2000hsb.googlegroups.com>,
Veerle <veerleverbr(a)hotmail.com> wrote:

> 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
From: dorayme on 17 Jun 2008 04:05
In article
<doraymeRidThis-F97FB2.17582017062008(a)news-vip.optusnet.com.au>,
dorayme <doraymeRidThis(a)optusnet.com.au> wrote:

> <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
><li>item</li
><li>item</li
><li>item</li>
</ul>

--
dorayme
From: Jukka K. Korpela on 17 Jun 2008 13:39
Scripsit Veerle:

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

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

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

 | 
Pages: 1
Prev: ie6/firefox box model differences?
Next: Form