List bullets drop to bottom of <li> in IE 2

[ChrisHunt]

I'm seeing a weird error on some of my pages. If you view

http://www.yhagroup.org.uk/archives/coalport-report

in IE, either version 6 or version 7, the list bullets on the <ul> near the middle of the page appear at the bottom of the <li> not the top.

The only reports of this bug that I can find online suggest that it can be caused by either the <ul> or the <li> having "layout", but I don't think that's the case here.

Does anybody have any suggestions?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[dkdude]

How odd.

Luckily, this can fix it:

li {
  vertical-align : top;
}

Tested in IE (6) and FF.

;-)

 

[dkdude]

I was a bit trigger happy there ... it does move the circle to the top. But too far in IE ... :-(

 

[Vragabond]

This sounded like the weirdest problem ever and you can definitely file it under IE quirk/bug. Anyway, apparently IE drops the bullets when <li>s have width applied. Get rid of the width, it's ok. Add width, problem is back. I have noticed many other problems with IE when widths are applied to <li>s. You can fix it by taking the width away from li and putting in on ul. That should work.

#content div.post div.storycontent li
{
margin-left: 30px;
[s][red]width: 80%;[/red][/s]
}

 

[ChrisHunt]

Thanks guys.

I looked at that CSS a dozen times last night but never spotted that width. That's what comes from starting from somebody else's template instead of writing your own I guess.

It's working correctly now, *s to both of you for your help.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd