5 replies [Last post]
cyberstudios
Offline
Regular
Last seen: 14 years 23 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

Hi
I'm finding the line spacing between list items varies significantly between IE6 & Netscape 7. Is there a way I can standardise the spacing for these list objects? I've included an example which produces a deeper overall list height in IE6 than in Netscape 7.
Thanks!

<ul>
<li>list 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

&lt;ul&gt; in different browsers

It's a combination of two things:

  • IE Whitespace Bug
  • Different margins and padding

This:

ul, li {
margin: 0;
padding: 0;
}

will reset both margins and padding to 0. You then add in what you need.

As for the whitespace bug, this is a quick fix:

<ul><li>
list 1</li><li>
List 2</li><li>
List 3</li>
</ul>

[/]

Verschwindende wrote:
  • CSS doesn't make pies

cyberstudios
Offline
Regular
Last seen: 14 years 23 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

&lt;ul&gt; in different browsers

Thanks for the info, unfortunately that doesn't seem to fix it. I still get more space between lines in IE6 than Netscape 7, but on top of that the bullets have now disappeared from both browsers.

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 11 years 12 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

&lt;ul&gt; in different browsers

Is this a menu? Are those links in there?
If so, try this :

* html ul a {
height:1px;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 12 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&lt;ul&gt; in different browsers

cyberstudios wrote:
but on top of that the bullets have now disappeared from both browsers.

Zeroing padding and margins will do that. You need to give the ul or li elements some indentation from the left, use either padding-left or margin-left. Different browsers by default indent lists using different CSS attributes. You need to set one and zero the other so that all browsers are the same.

Be careful at constructing a design that relies too much on heights of elements. It only takes one user to increase the font-size a step or two to mess things up completely.

cyberstudios
Offline
Regular
Last seen: 14 years 23 weeks ago
Joined: 2005-07-03
Posts: 32
Points: 0

&lt;ul&gt; in different browsers

Thanks for everyone's help here, a combination of techniques has produced a much better result than I had before Smile