Tue, 2005-07-26 17:49
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>
Tue, 2005-07-26 18:00
#1
<ul> 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>[/]
Tue, 2005-07-26 23:42
#2
<ul> 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.
Wed, 2005-07-27 00:19
#3
<ul> in different browsers
Is this a menu? Are those links in there?
If so, try this :
* html ul a {
height:1px;
}
Wed, 2005-07-27 03:19
#4
<ul> 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.
Thu, 2005-07-28 22:28
#5
<ul> in different browsers
Thanks for everyone's help here, a combination of techniques has produced a much better result than I had before 