Publicado em 29 de mai.

espaçamento bizarro que o IE cria

Seguinte... aos poucos to tentando descobrir e resolver os místérios que nós nos defrontamos ao criar sites... principalmente quando se tem pela frente a desgraça do Internet Explorer...

quero ver se alguém se tem como resolver uma coisa...

entrem em http://www.muraldasaudade.com/teste.html

bem, fiz um exemplo simples pra demonstrar... o que temos ali é uma DIV verde com uma imagem dentro.

o código é o seguinte:

<!--

body {

	margin: 0px;

}

 

#teste{

	width: 200px;

	height: 100px;

	background-color: #009966;

 

	}

-->

</style></head>

 

<body>

	<div id="teste"><img src="foto_perfil.jpg" />	</div>

</body>

</html>

Bom, gostaria que vcs abrissem em browers diferentes. No firefox percebe-se que fica perfeito né? uma imagem de 100 px de altura dentro de uma div com 100px de altura. Porém quando aberto no IE, a div aumenta de tamanho! aí você tem vontade de se escabelar defronte a uma bizarrice dessas.

Alguem sabe pq esse espaço é criado? e como se soluciona isso?

muito agradecido se alguém ajudar

Abarço

Discussão (21)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

micox· 29 de mai.

Já tentou zerar o margin e o padding padrão de todos os elementos?Agente sempre aconselha a se fazer isso SEMPRE, pois assim VOCE terá o controle dos seus elementos.Pra fazer isso coloque * {margin:0;padding:0} no início de todos suas folhas de estilo

alexandre h.· 29 de mai.

sim, já fiz isso.nao adianta nada, o espaçamento continua

pa_bruno· 29 de mai.

coisas do i.e. se você colocar como background, fica relax...

alexandre h.· 29 de mai.

poiseh bruno, o problema é que não pode ser como background... o site que eu preciso disso vai precisar colocar imagens via banco de dados...você acha que não tem o que fazer?

Maujor· 29 de mai.

Ola,

Declare:

img {display:block;} e o problema estará resolvido.

Por que? => Explicação aqui

pa_bruno· 29 de mai.

boa maurício...

bem extenso hein... bizarro... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

micox· 30 de mai.

Bixo. Já lí essa viagem aí umas 2 vezes e o negócio não entra na minha cabeça..Entender eu até entendo, o problema é que não fixa. Daí na hora de fazer algum trabalho eu nem lembro dessas parada aí...

Maujor· 30 de mai.

O importante não é saber de cór.

Saber onde encontrar quando precisa é que importa e é útil

micox· 30 de mai.

Saber onde encontrar quando precisa é que importa e é útil

É meu problema. Na hora que to fazendo os trabalhos nunca lembro do hasLayout hehaeh. Mas prometo que vou estudar http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

alexandre h.· 30 de mai.

Obrigado pela ajuda Maujor!Bom, eu apliquei o img {display: block;} no meu exemplo, e funcionou perfeitamente! porém eu aplicar no site real, em que eu realmente preciso disso, não funciona! isso que está praticamente igual. veja o código resumido desta parte:.perfil{ width: 746px; height: 100px; padding: 0px; margin: 16px 16px 0 16px; position: relative; float: left; background-color: #F0F7FF; display: inline; }.foto{ width: 129px; height: 100px; position: relative; text-align: right; float: right; padding: 0px; margin: 0px;}img{ display: block; }<div class="perfil"> <div class="texto_perfil">Frank Sinatra </div> <div class="foto"> <img src="imagens/foto_perfil.jpg"/> </div></div>outra coisa, dei uma olhada na tua matéria do hasLayout, mas, nao sei se é pq eu sou mt burro, mas nao encontrei a referência para este meu problema... poderia me dizer onde exatamente eu encontro a solução para o problema na matéria? Muito obrigado

pa_bruno· 30 de mai.

o q acontece?cuidado em utilizar em todas as imagens, pq elas ficam como bloco e faz o elemento seguinte pular linha na maioria das vezes, dependendo das propriedades dele...

TheChessMan· 30 de mai.

Uma ótima fonte de estudo e que explica mto bem o 'problema' das imagens é o livro Projetando Web sites Compatíves de Jeffrey Zeldman

Mto bom o livro, recomendo.

;)

Maujor· 30 de mai.

cuidado em utilizar em todas as imagens

Não é só com imagens que acontece isso.

Qualquer elemento que você estilize TODOS os elementos na página seguirão as regras CSS.

Para evitar isso atribua uma classe às imagens que você quer que tenham comportamento de blocos.

alexandre h.· 30 de mai.

bruno, acontece o mesmo problema... o IE deixa o espaçamento embaixoo que realmente significa display: block?outra coisa, descobri que, ao se colocar o display block o FF destroi com o text-align... se por exemplo eu quero q a imagem fique na direita e como bloco o alinhamento nao funciona...

pa_bruno· 30 de mai.

ele descarta, pois a propriedade, como ela descreve, eh para textos, para funcionar em blocos, teria q colocar um margin: auto; dentro da propriedade da imagem q receber a classe.

display: block

lê lah ;)

com certeza maujor, ia falar q era melhor colocar uma classe, senaum iria dar problema ;)

alexandre h.· 30 de mai.

desculpem a minha burrice, mas nao estou conseguindo fazer funcionar...olhando o código que eu coloquei, vcs conseguem ver pq não está funcionando? querem que eu ponha um link pro site pra verem exatamente?mais uma vez valeu pela ajuda

marcellobritto· 30 de mai.

Cara, pelo que li, voce ainda nao conseguiu resolver seu problema... e é bem simples... olhe essa linha do seu código:<div id="teste"><img src="foto_perfil.jpg" width="81" height="100"> </div>Você tá deixando um espaçamento ali entre a abertura do div e seu fechamento... remova esse espaço deixando assim:<div id="teste"><img src="foto_perfil.jpg" width="81" height="100"></div>Dessa forma seus problemas serão resolvidos.

alexandre h.· 30 de mai.

marcelo, valeu pela ajuda, porém não é esse o problema... mesmo tirando aquele espaço entre a abertura e fechamento , o IE continua criando aquela linha embaixo da foto.na verdade, eu consegui resolver o problema nesse meu teste, colocando o display block na imagem como o maujor falou, porem fazendo a mesma coisa no meu site (veja o codigo que postei dps) o problema persiste. e pior, no FF ele estraga o alinhamento da direita...sinceramente nao sei mais o que fazer, acho que terei q deixar assim mesmo, pois o IE não tá a fim de cooperar

marcellobritto· 30 de mai.

Ve se te adianta se ficar assim:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><style type="text/css"></style></head><body><div class="perfil"><div class="texto_perfil">Frank Sinatra</div><img src="foto_perfil.jpg"/></div></body></html>

pa_bruno· 30 de mai.

leia sobre o q eh display block... ele fica como um bloco e coloca um quebra d linha antes e depois dele...se você coloca na imagem, ele faz isso na imagem... você teria q colocar um float na imagem, para ficar do lado q você quer... pode ser left ou right... depende do lugar q você queira a imagem...

alexandre h.· 30 de mai.

eh, o float right realmente resolveu o problema do alinhamento que dava no FF ao usar o displat block, porém o maldito espaçamento continua aparecendo no IE...nao sei pq no meu teste funcionou e no site nao