Ir para conteúdo

POWERED BY:

Arquivado

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

Eduardoaa

Erro layout no IE9

Por , em Desenvolvimento frontend

Recommended Posts

Eduardoaa    0

Eduardoaa
Postado

Pessoal, boa noite

 

Criei uma página em html+css+javascript, tudo funciona perfeitamente no firefox e no chrome, porém no IE9 os menus ficam todos desalinhados.

 

Eu não entendo muito de CSS, se alguém puder me ajudar agradeço.

 

Código HTML+jAVASCRIPT

 

<html>
<head>
<!--o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o
o.o.o.o.o.o.o.o.o.o.o.o.o		página que demonstra o que é o bazar		.o.o.o.o.o.o.o.oo.o.o.o.o.o.o.o.
o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o-->
<title>::::....Voluntários....::::</title>
<link rel="stylesheet"  type="text/css" href="design.css" />
</head>
<body onload="IniciaTempo()">
	<div id="container">
	<div id="header"> 
		<img src="banner1.jpg" name="imagem" id="imagem" height=250 width=960>
		<script language="Javascript">
		var imagens = new Array();
		var imagem_atual = 0;
		function IniciaTempo() {
			DefineImagem()
			tempo_seg = 4
			tempo_ms = tempo_seg*1000
			timerMudaImagem = setInterval(MudaImagem, tempo_ms)
		}
		function DefineImagem() {
			imagens[0] = "banner1.jpg"
			imagens[1] = "banner2.jpg"
			imagens[2] = "banner3.jpg"
		}
		function MudaImagem() {
			imagem = document.getElementById("imagem")
			if (imagem_atual==3) {
				imagem_atual = 0
			}
			imagem.src = imagens[imagem_atual]
			imagem_atual++
		}
	</script>
	</div>
	<div id="menu">
		<ul>
		<li><a href="principal.php">Início</a></li>
		<li><a href="quem_somos.html">Quem Somos</a></li>
		<li><a href="sejavol.html">Seja um Voluntário</a></li>
		<li><a href="bazar.html">Bazar</a></li>
		<li><a href="eventosPub.php">Eventos</a></li>
		<li><a href="formulario.html">Contato</a></li>
		</ul>
	</div>
	<div id="conteudo">
	<FONT face= "Arial " SIZE=4>
               Aqui vai o texto
	<br><br></font>


	</div>
	<div id="rodape">
	<center><b>
	<br>
	Todos os direitos reservados!
	</b></center>
	</div>

</body>
<html>

 

Código CSS:

*{
margin: 0;
padding: 0;
-moz-border-radius: 8px; /* Para Firefox */
-webkit-border-radius: 8px; /*Para Safari e Chrome */
border-radius: 8px; /* Para Opera 10.5+*/
}
html, body {
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;	
}
a {
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#container{
width:950px;
padding: 5px; 
margin: 0 auto;

}
#header{
width:960px;
height:250px; 
/*background:url(volcanc.jpg);*/
}
#menu{
width:962px;
height:30px;
/*border: 1px solid #666;*/
margin-bottom:5px;
margin-top: 3px;
background: #EE0000;
}
#menu ul{
list-style: none;
}
#menu ul li{
list-style: none;
}
#menu ul li a{
float: left;
font:18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
padding: 5px 41px;
}
#menu ul li a:hover{
background:#000000;
color:#FFFF00;
}
#conteudo{
width: 949px;
height: auto;
float: left;
padding: 1px 5px;
border: 1px solid #000;
margin-bottom: 5px;
background-image: url("volcanc.jpg");
background-repeat: no-repeat;
background-position: center;
}
#rodape{
width: 949px;
height: 20px;
}

Se alguém puder me ajudar agradeço!

 

Eduardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Polli    0

Evandro Polli
Postado

Fechei a div container, adicionei um display inline nas li e aumentei a largura da div container, testa e verifica se está ok!

 

 

 

<html>
<head>
<!--o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o
o.o.o.o.o.o.o.o.o.o.o.o.o		página que demonstra o que é o bazar		.o.o.o.o.o.o.o.oo.o.o.o.o.o.o.o.
o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o.o-->
<title>::::....Voluntários....::::</title>
<link rel="stylesheet"  type="text/css" href="design.css" />
</head>
<body onload="IniciaTempo()">
	<div id="container">
	<div id="header"> 
		<img src="banner1.jpg" name="imagem" id="imagem" height=250 width=960>
		<script language="Javascript">
		var imagens = new Array();
		var imagem_atual = 0;
		function IniciaTempo() {
			DefineImagem()
			tempo_seg = 4
			tempo_ms = tempo_seg*1000
			timerMudaImagem = setInterval(MudaImagem, tempo_ms)
		}
		function DefineImagem() {
			imagens[0] = "banner1.jpg"
			imagens[1] = "banner2.jpg"
			imagens[2] = "banner3.jpg"
		}
		function MudaImagem() {
			imagem = document.getElementById("imagem")
			if (imagem_atual==3) {
				imagem_atual = 0
			}
			imagem.src = imagens[imagem_atual]
			imagem_atual++
		}
	</script>
	</div>
	<div id="menu">
		<ul>
		<li><a href="principal.php">Início</a></li>
		<li><a href="quem_somos.html">Quem Somos</a></li>
		<li><a href="sejavol.html">Seja um Voluntário</a></li>
		<li><a href="bazar.html">Bazar</a></li>
		<li><a href="eventosPub.php">Eventos</a></li>
		<li><a href="formulario.html">Contato</a></li>
		</ul>
	</div>
	<div id="conteudo">
	<FONT face= "Arial " SIZE=4>
               Aqui vai o texto
	<br><br></font>


	</div>
	<div id="rodape">
	<center><b>
	<br>
	Todos os direitos reservados!
	</b></center>
	</div>
       </div>
</body>
<html>

 

Código CSS:

*{
margin: 0;
padding: 0;
-moz-border-radius: 8px; /* Para Firefox */
-webkit-border-radius: 8px; /*Para Safari e Chrome */
border-radius: 8px; /* Para Opera 10.5+*/
}
html, body {
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;	
}
a {
font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
}
#container{
width:970px;
padding: 5px; 
margin: 0 auto;

}
#header{
width:960px;
height:250px; 
/*background:url(volcanc.jpg);*/
}
#menu{
width:962px;
height:30px;
/*border: 1px solid #666;*/
margin-bottom:5px;
margin-top: 3px;
background: #EE0000;
}
#menu ul{
list-style: none;
}
#menu ul li{
list-style: none;
       display: inline;
}
#menu ul li a{
float: left;
font:18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
padding: 5px 41px;
}
#menu ul li a:hover{
background:#000000;
color:#FFFF00;
}
#conteudo{
width: 949px;
height: auto;
float: left;
padding: 1px 5px;
border: 1px solid #000;
margin-bottom: 5px;
background-image: url("volcanc.jpg");
background-repeat: no-repeat;
background-position: center;
}
#rodape{
width: 949px;
height: 20px;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardoaa    0

Eduardoaa
Postado

Evandro, fiz o que me sugeriu porém sem efeito.

 

Henrique, o link para o site é www.voluntariosdocancer.org/bazar.html

 

Reparei também que no IE nem o javascript do cabeçalho roda.

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardoaa    0

Eduardoaa
Postado

Ok, desculpe Evandro,

 

Acho que colei errado, Ela acertou o menu e ficou bom agora ele não alinhou a página no centro e o javascript não roda, mais uma vez se puder dar uma força agradeço.

 

Abraço!

 

Eduardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

joaofla123    3

joaofla123
Postado

quanto ao alinhamento eu noto que suas divs estao todas com tamanhos diferentes. tente retirar o padding delas e seta-las com o mesmo width da div container. assim elas ficarao alinhadas.

 

nos elementos de dentro das divs você usa o margin, ou ate o padding q estava utilizando na div para manter o espacamento.

 

 

qt ao javascript darei mais uma olhada pra tentar descobrir

 

tenta colocar o script no header e nao dentro do body. se nao funcionar poste novamente

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