CSS in Internet Explorer: list-style-image and float:left issue

Question

I have an issue with list-style-image property in CSS with Internet Explorer 8

If I set

li {
 float:left;
 list-style-image: none;
}

each menu item is above each other. If I remove list-style-image:none, they are perfectly positioned instead, but they have the dot image. (see images)

Answer 1

The elements of the list collapse since you set float:left to <li/> and to the inner <a/>. There is no need to; removing float:left from <a/> solves the problem.

As for the list bullets, like said before, list-style-type:none is the way to go.

Especially for IE8, I also suggest to remove the line-height:0 in #block-menu-primary-links. It may cause the collapsing behavior.

Note: I don't really understand the suggestion by @orokusaki. Tried without position:relative;, and it works perfectly well.