Ir para conteúdo

POWERED BY:

Arquivado

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

<%Rafael%>

IE cria espaçamento inexistente

Por , em Desenvolvimento frontend

Recommended Posts

<%Rafael%>    0

<%Rafael%>
Postado

Fala pessoas, beleza?

 

Estou me deparando com um erro aqui que não encontro solução.

Ao utilizar uma camada com float:left e outra ao lado com o conteúdo, esta, por sua vez, cria um espaçamento inexistente de acordo com a altura da camada ao lado.

 

Para explicar melhor, confiram as imagens que explicam o erro:

 

1 - No Firefox, tudo normal:

Imagem Postada

 

 

2 - No IE, o espaçamento que cria antes do texto:

Imagem Postada

 

 

Alguém tem alguma idéia de como contornar isso?

 

Utilizar o float:right na camada do texto, e definindo um tamanho para ela, soluciona, mas no caso não ajuda pois o tamanho desta deve ser variável...

 

Abraços, http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Tente fazer o seguinte:

*{margin:0;padding:0;}

Caso não resolva, poste um link.

Compartilhar este post

Link para o post
Compartilhar em outros sites

wills    0

wills
Postado

exato, se não tente alguma saída alternativa (não me refiro a hacks, ainda)

 

apenas dê uma olha em seu fonte para ver se podes alterar algo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

<%Rafael%>    0

<%Rafael%>
Postado

na verdade eu já zero tudo por padrão no início do meu css, utilizando o :

 

*{

padding:0; margin:0;

}

 

Quanto a hacks, já tentei, mas não encontrei um que solucionasse esse caso...

 

Vou continuar tentando aqui, se alguém mais tiver alguma idéia, agradeço antecipadamente..

 

Valeu galera ;D!

 

**

 

Update:

Segue aqui o código exemplo da página:

 

<html>

<head>

<title>Teste</title>

<style type="text/css">

#geral{

background:green;

width:500px;

font:10px Verdana;

}

#esquerda{

background:red;

width:100px;

height:150px;

float:left;

}

#direita{

background:yellow;

margin:0 0 0 110px;

}

</style>

</head>

<body>

 

 

<div id="geral">

 

<div id="esquerda">

Conteúdo da Esquerda

</div>

 

<div id="direita">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et quam at est vestibulum pellentesque. Curabitur vestibulum, nunc vel tempor euismod, nunc libero dapibus sem, ut congue nulla lectus eu nisl. In hac habitasse platea dictumst. Nunc bibendum, mauris at pulvinar laoreet, lectus nibh auctor mauris, quis feugiat enim diam a nulla. Proin eget neque et tortor dictum accumsan. Cras ullamcorper tincidunt mi. Aenean ante. Donec pretium massa vitae risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ligula odio, gravida vel, vehicula vel, porta id, neque. Donec convallis leo vel arcu.</p>

<p>Maecenas elementum, diam sed tincidunt mollis, justo risus commodo libero, ut tristique ante orci non nisi. Pellentesque mauris. Proin cursus. Praesent sed metus. Vivamus in tellus. Proin congue. In eget urna. Duis dictum molestie libero. Ut quis urna a tortor molestie iaculis. Nam quis nisi a erat volutpat adipiscing. Morbi mauris. Sed dui. Ut mi pede, facilisis sit amet, fringilla et, lacinia non, nibh. Etiam augue elit, lacinia lacinia, cursus vel, viverra et, massa. Integer malesuada egestas tortor.</p>

</div>

 

</div>

 

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wills    0

wills
Postado

ae bonitão...

 

uma alternativa boa.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste</title>
<style type="text/css">
#geral{
position:absolute;
background:green;
width:500px;
font:10px Verdana;
}
#esquerda{
background:red;
width:100px;
height:150px;
float:left;
}
#direita{
background:yellow;
width:390px;
margin:0 0 0 0px;
padding:0;
float:right;
}
</style>
</head>
<body>


<div id="geral">

<div id="esquerda">
Conteúdo da Esquerda
</div>

<div id="direita">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et quam at est vestibulum pellentesque. Curabitur vestibulum, nunc vel tempor euismod, nunc libero dapibus sem, ut congue nulla lectus eu nisl. In hac habitasse platea dictumst. Nunc bibendum, mauris at pulvinar laoreet, lectus nibh auctor mauris, quis feugiat enim diam a nulla. Proin eget neque et tortor dictum accumsan. Cras ullamcorper tincidunt mi. Aenean ante. Donec pretium massa vitae risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ligula odio, gravida vel, vehicula vel, porta id, neque. Donec convallis leo vel arcu.</p>
<p>Maecenas elementum, diam sed tincidunt mollis, justo risus commodo libero, ut tristique ante orci non nisi. Pellentesque mauris. Proin cursus. Praesent sed metus. Vivamus in tellus. Proin congue. In eget urna. Duis dictum molestie libero. Ut quis urna a tortor molestie iaculis. Nam quis nisi a erat volutpat adipiscing. Morbi mauris. Sed dui. Ut mi pede, facilisis sit amet, fringilla et, lacinia non, nibh. Etiam augue elit, lacinia lacinia, cursus vel, viverra et, massa. Integer malesuada egestas tortor.</p>
</div>

</div>

</body>
</html>

da uma lida no fonte porque não está complicado não...

Compartilhar este post

Link para o post
Compartilhar em outros sites

<%Rafael%>    0

<%Rafael%>
Postado

Então velho, o problema é que veja:

 

"Utilizar o float:right na camada do texto, e definindo um tamanho para ela, soluciona, mas no caso não ajuda pois o tamanho desta deve ser variável..."

Isso é que tá pegando... hehe!

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

<%Rafael%>    0

<%Rafael%>
Postado

Ele não varia, pois o tamanho está especificado.. aumente a div pai (geral) para ver como a div com o texto continua com o mesmo tamanho...

 

variável é q vou trabalhar com porcentagens, para as diversas resoluções...

 

;D

Compartilhar este post

Link para o post
Compartilhar em outros sites

wills    0

wills
Postado

então antes de postar o fonte deixa ver se eu entendi.

 

o que queres que seja variável é a div pai (verde)?

 

o restante está de boa.

 

porém cara, nunca vi trabalhar com porcentagem no estili vertical, apenas horizontal.

 

isso rola muita dificuldade.

 

mas me diiz, é somente a divi pai que vai ser variável?

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