Menu Horizontal Forma Uma Escada

Eu não sei o que ta causando isso. Estou fazendo um site e tendo problemas com o menu horizontal no IE 7. Coloco float left e os itens se alinham um do lado do outro, no entando eles não sobem, e acabam formando uma escada. Não consigo resolver, e só ocorre no IE7. =//

o código html é assim:

<body>
<div id="nonFooter">
  <div id="menu">
    <div id="nav">
      <ul id="listaMenu">
        <li ><a href="home.html"class="listaMenu">· O mundo da Carlota</a></li>
        <li ><a href="parcerias.html" class="listaMenu"id="ePLogo">· Parcerias</a></li>
        <li ><a href="servico.html"class="listaMenu">· Serviços</a></li>
        <li ><a href="diversao.html"class="listaMenu">· Diversão</a></li>
        <li ><a href="contato.html"class="listaMenu">· Contato</a></li>
      </ul>
    </div>
    <!--END of nav-->
  </div>
  <!--END of menu-->
  <div id="content"></div> 
</div>
<!--END of nonFooter-->
<div id="footer">
</div>
<!--END of footer-->
</body>

e o css:

* {
	margin:0;
	padding:0;
	border:0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	background-image:url(img/fundo.jpg);
	background-attachment:scroll;
	background-position:top center;
	background-repeat:no-repeat
}
* html #nonFooter {
	height: 100%;
}
#nonFooter {
	position:relative;
	min-height: 100%;
}
#menu {
	position:relative;
	width:1280px;
	height:231px;
	left:50%;
	margin-left:-640px;
	background-image:url(img/menu.png);
	background-attachment:scroll;
	background-position:top center;
}
#listaMenu {
	position: relative;
	width:100%;
	top:156px;
	margin-left:280px;
	min-height:0;
	list-style-type:none;
}
li a.listaMenu {
	float:left;
	display: inline;
	text-decoration:none;
	color:#FC0;
	margin:auto auto 5px 5px;
	font-family: Verdana, Arial, Helvetica;
	font-size: 12px;
	font-weight:bold;
}
li #ePLogo {
	margin-right:265px;/*espaço para o logotipo*/
}
#content {
	position:relative;
	width:750px;
	left:50%;
	margin-left:-375px;
	border-bottom:5px;
	padding-bottom: 275px; /*altura do footer*/
}
#footer {
	position: relative;
	margin-top:-275px;
	height:275px;
	clear:both; /*elimina os "float's" criados nos boxes*/
	width:1280px;
	left:50%;
	margin-left:-640px;
	background-image:url(img/footer.gif);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#002d4a;
}
#innerFooter {
	width:750px;
	position:absolute;
	left:50%;
	margin-left:-375px;
}

#1 ilustrevitor

#2 Maykel Esser

#3 ilustrevitor

#4 Maykel Esser

#5 ilustrevitor

#6 HaroNism

#7 JeffMalm

1 user(s) are reading this topic