CODEWITHSUNDEEP
htmlcss
Dónal
Dónal

Reputation: 187529

HTML unordered list sucks in IE7

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

Upvotes: 0

Views: 3171

Answers (7)

hunter
hunter

Reputation: 63522

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.

Upvotes: 0

Eriawan Kusumawardhono
Eriawan Kusumawardhono

Reputation: 4906

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

Upvotes: 3

bendewey
bendewey

Reputation: 40235

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>

Upvotes: 1

user65663
user65663

Reputation:

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.

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532465

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.

Upvotes: 2

Jason
Jason

Reputation: 15931

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

Upvotes: 1

Peter Wone
Peter Wone

Reputation: 18765

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.

Upvotes: 1

Related Questions