Below are the key elements I use in the reset that, if not fixing the issue, will atleast shorten up that code you have for your list above:

/* Normalizes Margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{
margin: 0;
padding: 0;
}

/* Removes list-style from lists */
ol, ul { list-style: none; }

The entire thing is at: http://www.markupninjas.com/ma...Ninjas.css

Also, another ninja clearing thing to do is to go to the wrapper and add: Overflow: hidden; (in this case, it would be your LI that is the wrapper of the floated items).

It will make the LI act like it floated and cleared the anchor tags float. This typically works best if you don’t declare a height, but you can if you need to. No clear: both; needed, and you can use this reliably across the board, ie6, ie7, safari on pc, safari on mac, firefox on both.

If you master that overflow trick (which is not a hack by the way, its actually in the w3c spec), your one step closer to a single stylesheet, no hack, no clearfix solution

Anyways, back to the issue, I actually just typically do what you did on Step 3 and it works across the board again.

One trick I learned that helps with the width’s and such is: to rid yourself of the spacing, you only need the LI to float, as well as the anchor. So no width is actually needed for your LI.

Typically, I’ll do all my padding, width, and margins on the anchor, which pushes around the LI’s etc etc. That way, when width changes, you go to one source for the width adjustments.

Anyways, just a few thoughts from my end, great post Aaron. Yeah, I kinda do have a crush on UL styling

I have two more question: can someone confirm that IE7 has the same bug?
Do the presented methods apply for IE7 too?

The way you went about it is perfect in that case.

Awesome, glad I could help!