IE7 bug: list bullets aligned to bottom

[MikeHopley]

This page shows the problem. Look at the bullet points in IE7: they line up with the bottom of the list item, not with the first line of text.

In IE6 and Firefox it's fine.

I can change the alignment using vertical-align: top, but that lines the bullets up with the top of the <li> block box, not with the first line of text.

I'd prefer a fix for this that does not rely on images. Any ideas?

[drd]

You havent closed any of your list items, try closing them.
I suspect its just a result of those missing </li> tags.

[MikeHopley]

Good idea. I've now closed all my <li> tags with </li>, but unfortunately the bug remains.

Well spotted though!

[drd]

hmm wierd one havent seen it before. I would try setting padding/margin to 0, specifying your line-height etc in your content list beacause I think it is getting a style from some other list in the css

[MikeHopley]

Originally Posted by drd

hmm wierd one havent seen it before. I would try setting padding/margin to 0, specifying your line-height etc in your content list beacause I think it is getting a style from some other list in the css

I doubt it -- if it were inheriting a style from another list, the problem would show in other browsers too.

I think I know what the problem is: in my CSS, I'm using an unhealthy amount of absolute positioning. I guess that this is causing the IE7 bug.

This is very old code, from when I was starting to learn CSS. I've now rewritten the CSS and redesigned the site, using much simpler CSS without any absolute positioning. The bug is gone.

So if anyone else finds this bug, try removing your absolute positioning.

[Lchad]

Interesting... thanks for sharing Mike!

[mcdanielnc89]

hmm interesting, yet it doesn't happen to me on my site.. i have IE7 but they show jsut fine...