[Resolvido] Problemas MENU

[Elemke 3]

Prezados,

 

Tenho um menu com o seguinte código:

 

<link rel="stylesheet" href="menu/menu.css" type="text/css" media="screen" />
<div class="menu">
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li><a href="novaproposta.php">Incluir Proposta</a></li>
<li><a href="listarpropostas.php" >Listar Propostas</a></li>
<li><a href="propostasarquivadas.php" >Propostas Arquivadas</a></li>
<li class="sair"><a href="../login/logout.php" >[sAIR SISTEMA]</a></li>
</ul>
</div>

 

O CSS está assim:

 

ul.menu { width: 100%; height: 30px; background: #94aeb4; top left repeat-x; font-size: 12px; font-family: "arial", arial; font-weight: bold; list-style-type: none; margin: 0px; padding: 0; }
ul.menu li { display: block; float: leftt; margin: 0 0 0 50px; }
ul.menu li a { height: 43px; color: #003641; text-decoration: none; display:block; float: left; line-height: 200%; padding: 3px 15px 0; }
ul.menu li a:hover { color: #FFF; background:url("imagens/bgmenu-current.png") top left repeat-x; padding: 3px 15px 0; }
ul.menu li.sair a { color: #900; font-size:11px; margin-top:2px; }
ul.menu li.sair a:hover{ color: #F30; background:none; font-size:11px; }

 

Quando utilizo o Chrome... tudo beleza, porém, no IE abre da seguinte forma (imagem abaixo):

http://imageshack.us/photo/my-images/80/menuko.png/

[Diéssica 140]

ul.menu { width: 100%; height: 30px; background: #94aeb4; top left repeat-x; font-size: 12px; font-family: "arial", arial; font-weight: bold; list-style-type: none; margin: 0px; padding: 0; }
ul.menu li { display: block; float: leftt; margin: 0 0 0 50px; }
ul.menu li a { height: 43px; color: #003641; text-decoration: none; display:block; float: left; line-height: 200%; padding: 3px 15px 0; }
ul.menu li a:hover { color: #FFF; background:url("imagens/bgmenu-current.png") top left repeat-x; padding: 3px 15px 0; }
ul.menu li.sair a { color: #900; font-size:11px; margin-top:2px; }
ul.menu li.sair a:hover{ color: #F30; background:none; font-size:11px; }

 

Linha 1:

ul.menu { width: 100%; height: 30px; background: #94aeb4; top left repeat-x; font-size: 12px; font-family: "arial", arial; font-weight: bold; list-style-type: none; margin: 0px; padding: 0; } 

Tá definindo "top left repeat-x" pra quem?

 

Correto:

ul.menu { width: 100%; height: 30px; background: #94aeb4 top left repeat-x; font-size: 12px; font-family: "arial", arial; font-weight: bold; list-style-type: none; margin: 0px; padding: 0; }

 

Linha 2:

ul.menu li { display: block; float: leftt; margin: 0 0 0 50px; }

Valor "leftt" não existe. O IE é mais "sensível" pra CSS.

 

Correto:

ul.menu li { display: block; float: left; margin: 0 0 0 50px; }

 

Depois de corrigir, te recomendo validar: :seta: http://jigsaw.w3.org/css-validator/

 

:bye:

[Elemke 3]

Diéssica,

 

Obrigado pela ajuda...

 

Corrigindo o CSS resolveu no IE9, porém, no IE8 o problema continua.

 

Ba validade pela W3C tudo ok!...

 

Alguma idéia pq do problema no IE8?

[Diéssica 140]

Talvez se tu melhorasse o código poderia ajudar.

 

Ex.: float:left repetidos:

ul.menu li { display: block; float: left; margin: 0 0 0 50px; }
ul.menu li a { height: 43px; color: #003641; text-decoration: none; display:block; float: left; line-height: 200%; padding: 3px 15px 0; }

 

Por que determinou o valor de line-height em porcentagem? É bom sempre determinar em pixels porque cada navegador renderiza de uma forma. Pode complicar no espaço.

 

É bom também definir altura, background, float, padding tudo no LI. No a deixar só formatações de cores, backgrounds, linhas etc.

 

No IE 8 tá do mesmo jeito que tava no IE 9?

 

Testei nessas duas versões aqui e ficou normal.

[Elemke 3]

Ops.... resolvido...valeu