Ir para conteúdo

POWERED BY:

Arquivado

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

Claudio Neto

[Resolvido] Body em local errado em IE

Por , em Desenvolvimento frontend

Recommended Posts

Claudio Neto    3

Claudio Neto
Postado

Boa tarde.

 

Esse é o site que está me dando problema.

 

Ele deve ficar no centro da página, como está ocorrendo no firefox, mas no IE ele vai para a direita, fica por cima do menu e com o logo no fundo.

 

Deve ser alguma propriedade do css que não funciona no IE que está fazendo isso.

 

Segue meu CSS:

body{
	font-family:Arial;
	font-size:12px; 
	background-color:#0e7b09;
}

.site-wrapper{
	width:700px; 
	height:550; 
	margin-left:auto;
	margin-right:auto;
}

.header-wrapper{
	width:700px; 
	height:100px; 
	border:solid 1px;

}
.header-logo{
	height:170px;
	width:160px;
}

.header-menu {
margin-top:-90px;
}

.header-menu ul{
	padding:0; 
	margin:0;
	list-style:none; 
	float:right;
	}

.header-menu li
	{
	float:left;
	}
	
.seta
	{
	position:absolute;
	visibility:hidden;
	width:0px;
	top:50px;
}

.header-meno li:hover{
	background:url("seta.gif"); 
	background-repeat:no-repeat;
	background-position:center left;
}	

.body-wrapper{
	width:97%; 
	height:77%;
	background:url(fundo_03.gif);
	float:right;
}

Alguém sabe me dizer o que devo alterar para evitar isso?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ronaldo Bitencourt    0

Ronaldo Bitencourt
Postado

Olá Cláudio com está?

 

 

Bom vou tentar te ajudar vamos lá:

 

  • Primeiro eu vi que a imgem da logomarca no IE6 ela esta bugada, tente utilizarilizar transparência ou 0% ou 100% no IE6 algo fora disso vai dar pau!
  • Outra questão: quando não estiver usando posição absoluta tente centralizar seus elementos desta forma "margin:0 auto;"
  • Como você não está utilizando um CSS FLUIDO ao invés de usar largura e altura em percent no seu .body-wrapper tente utilizar um tamanho definido em PX, isto ajuda a dar menos diferença na interpretação do seu CSS pelos diferentes navegadores.

Infelizmente estou sem tempo pra testar mas aposto umas fichas que o problema principal esta na forma de declarar as margens do elemento .site-wrapper e a forma com que você definiu as larguras do .body-wrapper como disse acima.

 

 

Espero ter ajudado, nos mantenha informado e se resolver por favor poste qual foi o problema pra que a galera saiba também resolver se alguém algum dia passar por este mesmo problema.

 

 

Um abração Cláudio.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Ronaldo, obrigado pela ajuda.

 

Consegui melhorar do que estava, mas ainda não deixei como pretendo.

 

Por exemplo, não consegui centralizá-la. Quando uso margin: 0 auto; a página está ficando próximo ao canto superior esquerdo.

 

E quando a transparencia, já tive esse problema outras vezes, de usar png e o ie6 colocar uma cor verde na área atrás. Não sei como alterar isso, pode me dar uma mão quanto ao que disse, sobre 0%?

 

Olha lá de novo pra você ver, algumas coisas melhoraram...

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fall    0

Fall
Postado

No teu body

da um text-align: center;

 

depois na div do teu conteudo q envolve todo o site

coloca o text-align:left;

 

att

 

Fall

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Cara, valeu mas não mudou nada. Eu até consegui centralizá-lo colocando a 80px das margens, mas isso só dará certo para resolução de 1024x768. Sei que quando for visualizado em uma resolução maior, ficará fora do centro.

 

Mais algo que eu possa fazer?

 

Valeu..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Isso é porque você não declarou DOCTYPE para o documento:

<html>

<head>

Então, o IE está renderizando em modo quirks.

 

Troque por:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> 
<head>
E reveja algumas coisas da tua marcação e sintaxe CSS... tem erros.

.site-wrapper{
	width:700px; 
	height:550; /* aqui você esqueceu de declarar a unidade */

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Sim, fiz sim... pode conferir no código fonte da página, está tudo lá.

 

Mas não mudou...

 

Para conseguir deixar a logo do jeito que está, tive que deixá-la com position:absolute. Isso pode estar interferindo para que não consiga centralizar a página?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Lógico.

Não estruture o layout com positions, use float, margin e padding.

 

Positions apenas para pequenos slices. E não para tudo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Tá, vou alterar isso.

 

Utilizei porque não consegui posicionar a logo no local que está de outra forma. Repare que a div que contém o logo está metade por cima da div body.

 

Não consegui esse efeito de outra forma senão utilizando position. Tem outra forma de conseguir isso sem utilizar de position e poder centralizar todo o site?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Olá gente, desculpem a demora para responder, mas ando meio sem tempo para terminar esse site, hehe

 

Bom, fiz diversas alterações no CSS, retirei todos os positions.

 

Mas o site ainda não está centralizado.

 

Há alguma coisa que esqueci de fazer, ou algo mais que possa ser feito?

 

O CSS dele ficou assim:

 

site-wrapper{
	width:800px;
	height:550px;
	margin:0 auto;
	text-align:left;
}
/*==============================
	HEADER WRAPPER
===============================*/
.header-wrapper{
	width:700px; 
	height:100px; 
	border:solid 1px;
	/* css lets you designate how you want an image to 
	repeat. Along the x-axis, y-axis or not at all. */
}
.header-logo{
	height:170px;
	width:160px;
	z-index:5;
	margin-top:5px;
	margin-left:50px;
}

.header-menu {
	margin-top:0px;
}

.header-menu ul{
	padding:0; 
	/* the removes the left margin */
	margin:0;
	/* this removes the bullet */
	list-style:none; 
	float:right;
	z-index:5;
	}

.header-menu li
	{
	float:left;
	}
	
.seta
	{
	visibility:hidden;
	width:0px;
	top:50px;
}

.header-meno li:hover{
	background:url("seta.gif"); 
	background-repeat:no-repeat;
	background-position:center left;
}	
/*=========================
		BODY WRAPPER
===============================*/
.body-wrapper{
	/* floats are crucial to the creation of any
	web interface. Every web developer must master
	this concept. Don't worry I'll be writing a
	tutorial about this a little later.	:)	*/
	width:750px;
	height:450px;
	background:#00DD00;
	z-index:0;
	text-align:center;
	margin:0 auto;
}

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

Consegui centralizar. Agora está no local exatinho...

 

Sóóóóó que no IE, a logo está por trás do body.

 

Tentei utilizar z-index para trazê-la para frente mas não adiantou.

 

O que posso fazer para arrumar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ainda é esse o link, com o código atual?

http://www.bumerangueeventos.com.br/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Claudio Neto    3

Claudio Neto
Postado

É sim Willian.

 

Mas consegui.

 

Coloquei a div maior que engloba todo o site com margin: 0 auto.

 

Ai estava tendo problema que a logo estava por tras do body.

 

Ai coloquei tanto a logo quando o body com position:absolute, mas somente eles.

 

Assim a div site-wrapper continua sendo centralizada na pagina e logo e body estão fixas dentro de site.

 

Obrigado e todos que contribuiram para que desse certo.

 

Abraços...

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