Word up, son!

IE unordered list extra space bug

I was working on converting a client’s design into XHTML/CSS when I encountered something I SHOULD have faced long ago, but never did on account of my recent change in CSS practice. Since early this week, I’ve been starting new projects with a reset stylesheet to make my life a little easier and manage my time more efficiently. Anyway, onto the problem.
 

The problem

After completing the site, I checked in IE6 only to realize all my unordered [block] list menus had some odd extra space to the left. In other words, they had phantom indentations. The padding, margin, and indents were reset to 0, so I couldn’t figure out what the problem was. The list-style was also set to none. Googling produced a lot of people having the same issue, but no actual solutions in about 15 minutes of browsing. Stripped down and showing only relevant bits, this is the CSS I had in place:

* {margin: 0; padding: 0;}
ul, ol, li {list-style: none;}

The markup was straightforward:

<ul id="whoCares">
	<li><a href="#">A link</a></li>
	<li><a href="#">A link</a></li>
	<li><a href="#">A link</a></li>
</ul>

The solution

Utterly, painfully simple.

ul, ol, li {list-style-position: outside; list-style: none;}

That damn list-style-position. It almost makes you want to punch yourself.