February 5th, 2008
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: CSS