Problemas com border no IE

[joazweb 0]

Ola galera, um exemplo bem pratico do que esta acontecendo comigo!

 

testem esse codigo no ff e no ie 6 e 7 e vejam a diferenca! se ja nao souberem logo de cara!

 

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

 

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

 

 

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

 

oq acontece eh que fica um espacamento entre as divs em um dos navegadores!

 

espero que possam me ajudar a corrigir isso, desde ja agradeco!

[Nícolas 4]

Bom cara apenas simplificando o que você fez.

 

Ao invez de utilizar CSS inline usa em um arquivo externo ou no topo do documento, acredito é muito mais pratico para alterações.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

CSS

<style type="text/css">
<!--
	.esquerda {
		border:1px solid #000;
		float:left; 
		width:200px; 
		height:200px; 
		background-color:#F00;
	
	}
	
	.direita {
		border:1px solid #CCC;
		height:200px;
	}
-->
</style>

HTML

<div class="esquerda">legal</div>
<div class="direita">legal</div>

<div class="esquerda">legal</div>
<div class="direita">legal</div>


<div class="esquerda">legal</div>
<div class="direita">legal</div>

Eu não tenho como testar isso aqui.

 

Mas uma coisa que sempre me ajuda é trabalhar com valores certos.

 

Por exemplo:

 

Se a pagina vai ter 700px de largura

 

E eu quero criar uma coluna na esquerda com 200px e uma na direita que complete o espaço restante eu faço assim.

 

Esquerda: 200px com float:left

Direita: 500px com float:right

Total 700px da área

Tem muita coisa sobre layout com colunas no fórum, da uma pesquisada ^^

[joazweb 0]

Bom cara apenas simplificando o que você fez.

 

Ao invez de utilizar CSS inline usa em um arquivo externo ou no topo do documento, acredito é muito mais pratico para alterações.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

CSS

<style type="text/css">
<!--
	.esquerda {
		border:1px solid #000;
		float:left; 
		width:200px; 
		height:200px; 
		background-color:#F00;
	
	}
	
	.direita {
		border:1px solid #CCC;
		height:200px;
	}
-->
</style>

HTML

<div class="esquerda">legal</div>
<div class="direita">legal</div>

<div class="esquerda">legal</div>
<div class="direita">legal</div>


<div class="esquerda">legal</div>
<div class="direita">legal</div>

Eu não tenho como testar isso aqui.

 

Mas uma coisa que sempre me ajuda é trabalhar com valores certos.

 

Por exemplo:

 

Se a pagina vai ter 700px de largura

 

E eu quero criar uma coluna na esquerda com 200px e uma na direita que complete o espaço restante eu faço assim.

 

Esquerda: 200px com float:left

Direita: 500px com float:right

Total 700px da área

Tem muita coisa sobre layout com colunas no fórum, da uma pesquisada ^^

 

muito obrigado pela sua ajuda.. mas eu fiz um exemplo rápido por isso que eu coloquei em inline.. na verdade daria no mesmo eu fazer do outro jeito.. o problema é que pra você ver oq ta acontencendo teria que testar nos navegadores, mesmo eu colocando os valores especificados fica uma diferença nos navegadores.. aqui vai um print para poderem observar

[Nícolas 4]

tenta jogar um

 

<style type="text/css">
<!--
	* {
	   margin: 0px;
	   padding: 0px;
	}
-->
</style>

[joazweb 0]

tenta jogar um

 

<style type="text/css">
<!--
	* {
	   margin: 0px;
	   padding: 0px;
	}
-->
</style>

testei aqui.. e ficou na mesma ! <_<

continuo aceitam sugestoes!

[joazweb 0]

ola, por favor se alguem ai sabe oq esta acontencendo, e pode me falar um hack ou outra solucao para corrigir isso!

[James Owens 0]

Olá jaozweb,

 

Acho que o problema está no que o IE e FF interpretam como sendo bordas. Para fazer com que os usem as mesmas bordas na sua página, force isto através de estilos na tag <body>. Por exemplo:

 

CODE

<!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" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title></title>

</head>

<body style="margin: 3px; border: 3px;">

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

<div style="border:1px solid #000000;float:left; width:200px; height:200px; background-color:#FF0000;">legal</div>

<div style="border:1px solid #CCCCCC;height:200px">legal</div>

</body>

</html>

Este código é renderizado da seguinte forma no IE7 e no FF:

 

 

Como você. pode ver a borda agora é a mesma em ambos os navegadores.

 

Um abraço.

[joazweb 0]

no IE 7 e FF, como eu fiz funciona PERFEITO!

 

o problema é no "IE 6"

 

não sei como resolver isso!