Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael D

Menu Horizontal no IE

Por , em Desenvolvimento frontend

Recommended Posts

Rafael D    0

Rafael D
Postado

Ae pessoal,

 

Estou com problemas no menu horizontal que eu fiz, ele fica quebrado no IE!

 

O menu no Firefox e no Chrome aparece assim:

 

Imagem Postada

 

Já no IE ele fica quebrado, dessa forma:

 

Imagem Postada

 

O código que usei nos menus é o seguinte:

 

div#menu{
	font-family: Calibri,Tahoma,Verdana;
	font-size: 10px;	
	height: 37px;
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	padding-top: 10px;
	padding-bottom: 100px;
}


div#menu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;	
	height: 37px; 
}

#menu ul li a{ 
	float: left;
	font-size: 12px;
	text-decoration: none;
	color: #666666;	
	line-height: 38px;
}

#menu ul li a:hover { 
	float: left;
	color: #FFFFFF;
}

div#menu_mid{
	float: left;
	width: 970px;
}

div#menu_mid .first_mainlevel{
	background: url(../images/fundo_esq_normal.png) 0 0 no-repeat;
	width: 138px;
	
}
div#menu_mid .first_mainlevel:hover{
	background: url(../images/fundo_esq_select.png) 0 0 no-repeat;
	width: 138px;
}

div#menu_mid .last_mainlevel{
	background: url(../images/fundo_dir_normal.png) 0 0 no-repeat;
	width: 138px;
}
div#menu_mid .last_mainlevel:hover{
	background: url(../images/fundo_dir_select.png) 0 0 no-repeat;
	width: 138px;
}

div#menu_mid .mainlevel{
	background: url(../images/fundo_normal.png) 0 0 no-repeat;
	width: 138px;
}
div#menu_mid .mainlevel:hover{
	background: url(../images/fundo_select.png) 0 0 no-repeat;
	width: 138px;
}

Alguém sabe o que está errado?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

coloca o float só no LI

 

você tá usando DOCTYPE ?

 

limpou o list-style ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael D    0

Rafael D
Postado

Obrigado por responder William.

 

Quanto ao Doctype estou utilizando este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

O list-style eu (acho que) limpe aqui

 

div#menu ul{
        margin: 0;
        padding: 0;
        list-style-type: none;  
        height: 37px; 
}

Quanto ao float apenas no LI seria assim?

 

#menu ul li{ 
        float: left;
}

E retiro o float do restante?

 

____________________________________________________________________

 

Fiz o teste aqui e o menu ficou certo quando eu adicionei este código ao que coloquei no primeiro post:

 

#menu ul li{ 
        float: left;
}

Não retirei o float das outras definições porque, por algum motivo, as imagens somem.

 

 

Se não for pedir muito, alguém poderia me explicar porque foi necessário adicionar o código abaixo, para que funcionasse no IE também?

#menu ul li{ 
        float: left;
}

 

Obrigado pela ajuda William.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito