list-style in ie7 not functioning

Question

I have a simple setup like so..

ul { list-style: none; }

    #navigation ul li a {
    padding: 0px 15px 0px 15px;
    line-height: 32px;
    float: left;
    color: #dedede;
    font-weight: bold;
}

And then a list.

<div id="navigation">
   <ul>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
      <li><a href="#">etc</a></li>
   </ul>
</div>

The intention? The list items should render, side by side, in a straight line. Hunky dory in FireFox, IE8, Chrome, and Opera.

IE7 (and 6, too) displays them in a jagged stair-style, though. Any ideas?

Answer 1

For IE you will need to add display: inline; for the li tag.

So:

* #navigation ul li { display: inline; } 

Answer 2

You want to have the float on the li elements, not on the a elements. Here's the updated CSS:

#navigation ul li {
    float: left;
}

#navigation ul li a {
    padding: 0px 15px 0px 15px;
    line-height: 32px;
    color: #dedede;
    font-weight: bold;
}