Ir para conteúdo

Arquivado

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

alexandre h.

espaçamento bizarro que o IE cria

Por , em Desenvolvimento frontend

Recommended Posts

alexandre h.    1

alexandre h.
Postado

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:

 

<style type="text/css">

<!--

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre h.    1

alexandre h.
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

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í...

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre h.    1

alexandre h.
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado
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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre h.    1

alexandre h.
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre h.    1

alexandre h.
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcellobritto    0

marcellobritto
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alexandre h.    1

alexandre h.
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

marcellobritto    0

marcellobritto
Postado

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"><html><style type="text/css"><!--.perfil{width: 746px;height: 120px;padding: 0px;margin: 16px 16px 0 16px;position: relative;float: left;background-color: #F0F7FF;display: inline;}img{display: block;float: right;}--></style></head><body><div class="perfil"><div class="texto_perfil">Frank Sinatra</div><img src="foto_perfil.jpg"/></div></body></html>

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