IE7 CSS List Bug

Not really a bug, just a bad combination of CSS. If you style navigation links using list items, don’t repeat my mistake:

#nav ul{
list-style-type: none;
list-style-position: inside;
}

I had both these elements but in separate areas of my code. IE7 interprets this as an invisible bullet, creating a mysterious ~10px margin where the bullet would be located. Firefox overrides other list-style declarations when list-style-type: none; is present.

IE7 with my poorly written CSS:

FF 2 rendered my CSS the same both times:

IE7 with good CSS:

I also noticed IE7 does not draw in the yellow grooved bottom border. It lazily draws in a solid black border instead. Yuck.

Tags:

Leave a Reply

You must be logged in to post a comment.