HTML unordered list sucks in IE7

Question

I've created a HTML ordered list which looks fine in FF, but pretty awful in IE. My specific problems with the way IE displays the list are:

1. List markers are missing
2. Vertical spacing between list items is very uneven

It seems the superscripts are the cause of (2), but I'm not sure how I can fix this problem (without removing the superscripts).

EDIT: I gave up on my single-list dreams and split the list into 3 separate lists. I've removed the link from the text above to avoid confusing future readers.

Thanks, Don

Answer 1

You might see if the bullets are disappearing because you're coupling float-left with padding - not sure how IE counts the bullets as part of the size calcs.

Answer 2

If it's the list at the bottom of the page, you've got a bunch of whitespace inside your list tags. I don't know if that's causing the problem, but you might want to try eliminating it and see if that helps. The superscripts may also be throwing things off. Try giving the list itself a line height of 2em (or more) and see if that evens things out.

EDIT: you might also want to play with the left padding/margin on the list items and increase it to see if that brings the list markers back. I've had to do this with list-based menus to get my menu items to show up in the proper alignment.

Answer 3

I can tell for certain that the superscripts are what's altering the line height. If you want to force regular line heights you'll have to wrap everything in a table to prevent flow-based layount.

Answer 4

can you set the height of the li elments to account for the superscript? probably best to do that in CSS.

Answer 5

As others mentioned the height is due to the superscripted text.

As for the bullets Floating a list-item doesn't work well in IE. If you plan on doing a three column layout try something like this.

<style type="text/css">
ul {  
  float:left;
  padding:2em;
  width:14em;
}
</style>

<ul>
 <li>col1 - item1</li>
 <li>col1 - item2</li>
 <li>col1 - item3</li>
</ul>

<ul>
 <li>col2 - item1</li>
 <li>col2 - item2</li>
 <li>col2 - item3</li>
</ul>

<ul>
 <li>col3 - item1</li>
 <li>col3 - item2</li>
 <li>col3 - item3</li>
</ul>

Answer 6

This worked for me in IE7 and FireFox 3. It uses a lot of "span"s, which makes me unhappy, but I'm sure you can make it nicer with a little playing around.

Apparently when "float:left" is set on individual "li" objects, the bullets would disappear. (there's a chat about this here: http://www.webmasterworld.com/html/3004613.htm)

However, if you move the "float:left" into the "span" tags and the "width" on the "ul" (as opposed to a sub-style of the "div") as I've done below, both problems appear to go away.

Note other changes like the "br" inside the "ul" and no more "div" tag.

Style changes:

.column-list {width:60em}
.column-list span{float:left;} 
.column-list span li{padding: 4px; height: 15px; width:17em;}
.column-list br {clear: left;}

HTML changes:

<ul class="column-list">
<span ><li>Baignade</li></span>
<span  ><li>Bateau à moteur</li></span>
<span  ><li>Canot</li></span>
<span  ><li>Golf</li></span>
<span ><li>Kayak</li></span>
<span  ><li>Marche</li></span>
<span  ><li>Motomarine</li></span>
<span  ><li>Patin à roues alignées</li></span>
<span  ><li>Pêche</li></span>
<span  ><li>Pédalo</li></span>
<span  ><li>Plages publiques et privées</li></span>
<span  ><li>Planche à voile</li></span>
<span  ><li>Randonnée pédestre</li></span>
<span  ><li>Ski nautique</li></span>
<span  ><li>Tennis</li></span>
<span  ><li>Véhicule tout-terrain (Quad)</li></span>
<span  ><li>Vélo (piste cyclable à proximité)</li></span>
<span  ><li>Vélo de montagne</li></span>
<br />
</ul>

Answer 7

This is a known bug of IE5, IE6, and still in IE 7.

IE 8 Beta 2 and the latest, IE 8 RC1, will display your web page correctly.

But these are a list of list item bug before IE 8:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

http://gtwebdev.com/workshop/gaps/white-space-bug.php

Answer 8

try doing this for your LI's

<li>text</li><li>text</li><li>text</li><li>text</li><li>text</li><li>text</li>

Don't add in any line breaks. It's silly that this might fix it, but it's true.