css IE 7 and lists

[drosophilam]

I tried to make a nav list but IE 7 displays each <li> as a step down.
I searched for a fix on the forum. If this is a repost just let me know how to fix or the link to the answer and I will remove this question.
My code validates BTW

code:
xHTML
<ul id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="join.html">join</a></li>
<li><a href="sponsors.html">sponsors</a></li>
<li><a href="calendar.html">calendar</a></li>

</ul>
CSS
ul#nav {
margin-top: 0;
height: 228px;
background: url(../images_1/logo.jpg) no-repeat;
list-style: none;
}
ul#nav li {margin-left: -1.75em;}
ul#nav li a {
display: inline;
float: left;
margin-top: 200px;
padding: 0 .5em 0 .5em;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: .75em;
font-weight: bold;
border-right: 2px solid #fff;
letter-spacing: -.02em;
}
ul#nav a:hover, ul#nav a:active {
color: #333333;
}

Thanks for your help!

[rangana]

Remove display:inline, margin-top:200px; and float:left in your ul#nav li a rule.

And change ul#nav li to:

ul#nav li {float:left;margin-top:200px;}

Hope it helps.

[drosophilam]

got it. Thanks.