Problema CSS menu com IE6

[candycane]

Olá comunidade, hoje de manhã reparei que tenho um problema com o meu menu no IE6.. os links n ficam em linha, ficam um em baixo do outro...

O meu CSS é este:

#menu {
 position:relative;
 display:block;
 border-top-width: 4px;
 border-top-style: solid;
 border-top-color:#B30000;
 /*border-top-color: #9D1313;*/
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 height:39px;
 font-size:11px;
 font-weight:bold;
 background:transparent url(bg_out.gif) repeat-x top left;
}

.menustyle:after{ /*Add margin between menu and rest of content in Firefox*/
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}

.menustyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
 content: " " url(SpryMenuBarDown.gif); /*uncomment this line to use an image instead*/
}

#menu ul{
 margin:0;
 padding:0;
 list-style-type:none;
 width:auto;
}
#menu ul li{
 display:block;
 float:left;
 margin:0; 

 
}
#menu ul li a{
 display:block;
 color:#666;
 text-decoration:none;
 padding:11px 20px 0 20px;
 height:23px;
 background:transparent url(bg_div.gif) no-repeat top right;
}
 
#menu ul li a:hover{
 color:#B30000;
 background:#fff url(bg_over.gif) no-repeat top right;
 display:block;
}

#menu li {
 position: relative;
}

 

[alfinete]

da ai o code html

 

[candycane]

HTML:

<div class="menustyle" id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="produtos" rel="dropmenu1">Produtos</a></li>
<li><a href="servicos.php">Serviços</a></li>
<li><a href="contacto.php" >Contactos</a></li> 
</ul>
</div>

 

[candycane]

Já resolvi o problema... Tive que modificar o #menu ul li a em:

#menu ul li a{
display:inline;
float:left;
color:#666;
text-decoration:none;
padding:11px 20px 0 20px;
height:23px;
background:transparent url(bg_div.gif) no-repeat top right;
}

 

[alfinete]

 #menu {
 position:relative;
 display:block;
 border-top-width: 4px;
 border-top-style: solid;
 border-top-color:#B30000;
 /*border-top-color: #9D1313;*/
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 height:39px;
 
 font-size:11px;
 font-weight:bold;
 background:transparent url(bg_out.gif) repeat-x top left;
}

.menustyle:after{ /*Add margin between menu and rest of content in Firefox*/
 content: "."; 
 display: block; 
 height: 0;
 background-color:Red;
 clear: both; 
 visibility: hidden;
 
}

.menustyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
 content: " " url(SpryMenuBarDown.gif); /*uncomment this line to use an image instead*/

 }

#menu ul{
 margin:0;
 padding:0;
 list-style-type:none;
 //*alterei aqui*//
 width:auto; // comprimento do menu total
}
#menu ul li{
 display:block;
 float:left;
 margin:2px; 
 
  //*alterei aqui*//
 width:100px;// comprimento de cada botão
 
}
#menu ul li a{
 display:block;
 color:#666;
 text-decoration:none;
 padding:11px 20px 0 20px;
  //*alterei aqui*//
 text-align:center;/*alinhamento do texto dos botões*
 height:23px;
 background:transparent url(bg_div.gif) no-repeat top right;
}
 
#menu ul li a:hover{
 color:#B30000;
 background:#fff url(bg_over.gif) no-repeat top right;
 display:block;
}

#menu li {
 position: relative;
 //*alterei aqui*// 
 width:70px;
 background-color:red; /*tira esta cor foi so para ver o alinhamento*/

}

outra resolução

funciona bem em ie6 / 7 firefox , razoavel opera e safari
é so mais uns tokes