Extra list item padding in IE 6

Forum Moderators: not2easy

Message Too Old, No Replies

Extra list item padding in IE 6

Tonearm

5:07 pm on Dec 7, 2004 (gmt 0)

The following code works great in every other browser I've tested, but IE 6 adds extra padding above and below the contents of the list item:

CSS:
div,li {font-family:verdana;font-size:xx-small}

HTML:
<ul>
<li>li</li>
</ul>
<div>div</div>

Highlighting helps to see it. How can I get rid of that?

jetboy_70

5:26 pm on Dec 7, 2004 (gmt 0)

Probably just line-height on your <li> items, but also check padding and margin on the <ul>.

Tonearm

5:54 pm on Dec 7, 2004 (gmt 0)

line-height:normal doesn't seem to be doing the trick. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<ul>
<li>li</li>
</ul>
<div>div</div>
</body>
</html>

jetboy_70

7:26 pm on Dec 7, 2004 (gmt 0)

It's the line-height. Really. Try adding something like:

li { line-height; 10px; }

and then alter the pixel size to see the difference.

jetboy_70

7:40 pm on Dec 7, 2004 (gmt 0)

And while you're here ...

Make your DOCTYPE valid by changing <html> to:

assuming you're coding an English page. As you're looking to code XHTML Strict, you're going to have to fix some of this CSS.

.* {padding:0;margin:0;border:0}

is not valid CSS, and even if it was, it would add anything that the line above hadn't already covered. Ditch both lines, and replace them with:

html * {
padding: 0;
margin: 0;
border: 0;
}

This achieves the same zeroing of padding, margin and border, without removing IE's default 1px border on the <HTML> element.

[edited by: SuzyUK at 5:49 pm (utc) on Dec. 10, 2004]

kk5st

4:38 am on Dec 8, 2004 (gmt 0)

IE exhibits the white-space bug on lists. Eliminate white space after each </li>.


<ul> 
 <li>first</li><li> 
   second</li></ul>

It's as ugly as mud, but it works.

cheers,

gary

Tonearm

7:03 pm on Dec 8, 2004 (gmt 0)

jetboy,

line-height has been huge. I didn't know you could dial that in, and I have made several improvements with it.

I added the changes to the html tag, but it di validate without it.

Also, I thought the .* line was for some IE browsers. The pages do validate with it in there.

Thank you!

Robin_reala

1:19 pm on Dec 9, 2004 (gmt 0)

I had weird wite space issues in lists today that I got rid of by using:

li { border: 1px solid white; }

Don't ask me. I tried transparent instead of white but it came out as the colour of the text (?!). IE's a mess at times.