Problemas de formatação

[Fkarol 0]

Boa tarde

De acordo com o código abaixo, gostaria de formata meu Layout com css

 

<div id="layout">
	<div id="box01">
	<img src="images/image01.jpg" />
	</div>
	<div id="box02">
	
	</div>
	<div id="box03">
	<img src="images/image03.jpg" />
	</div>
	<div id="box04">
	<img src="images/image04.jpg" />
	</div>
	<div id="box05">
	<img src="images/image05.jpg" />
	</div>
	<div id="box06">
	<img src="images/image06.jpg" />
	</div>
	<div id="box07">
	</div>
	<div id="box08">

	</div>
</div>

 

body {
	background-color: #FFFFFF;
	background-image: url(../images/background.jpg);
	background-repeat: repeat-x;
}
#layout{
width:800px; 
margin:0px auto;

}
#box01{
	height: 106px;
	width: 347px;
	float: left;
}
#box02{
	background-image: url(../images/image02.jpg);
	height: 106px;
	width: 453px;
	float: right;
}
#box03{
	height: 36px;
	width: 800px;
	clear: both;
}
#box04{
	height: 207px;
	width: 77px;
	float: left;
}
#box05{
	height: 207px;
	width: 668px;
	float: left;
}
#box06{
	height: 207px;
	width: 55px;
	float: right;
}
#box07{
	height: 9px;
	width: 800px;
	background-image: url(../images/image07.jpg);
	clear: both;	
}
#box08{
	background-image: url(../images/image09.jpg);
	width: 656px;
	margin-left: 83px;
	clear: both;
}

Mas estou com o seguinte problema: no IE aparece um espaço na horizontal entre as Div, alguém poderia me ajudar a resolver este problema?

 

OBS: no firefox e no Dreamweaver o Layout fica normalmente.

 

Desde já agradeço.

[donato 0]

Amigo, ta muito confuso olhando só o código, acho q não precisa de tantas div ai não, se tiver um link é melhor pra visualizar. abraços

[Fkarol 0]

Infelizmente está complicado disponibilizar um link, mas vou tentar explicar melhor.

 

Primeiramente criei a Div layout, e apliquei a seguinte formatação:

#layout{
width:800px; margin:0px auto;
}

Com objetivo que a mesma tenha 800 de largura e que fique centralizada.

 

Depois criei as Divs box01, box02 dentro da div layout , com as seguintes formatações:

#box01{
	height: 106px;
	width: 347px;
	float: left;
}
#box02{
	background-image: url(../images/image02.jpg);
	height: 106px;
	width: 453px;
	float: right;
}

Alem das dimensões especificadas usei "float: left; right” com objetivos e colocar as divs uma do lado da outras (em colunas).

 

Em seguida criei as divs box03 dentro da div layout, com as seguintes formatações:

 

#box03{
	height: 36px;
	width: 800px;
	clear: both;
}

Alem das dimensões especificadas usei “clear: both” com objetivos e colocar a div debaixo das divs box01 e box02.

 

 

Em seguida criei as Divs box04, box05 e box06 dentro da div layout, com as seguintes formatações:

#box04{
	height: 207px;
	width: 77px;
	float: left;
}
#box05{
	height: 207px;
	width: 668px;
	float: left;
}
#box06{
	height: 207px;
	width: 55px;
	float: right;
}

 

Alem das dimensões especificadas usei “float: left; right” com objetivo, colocar as divs uma do lado da outras (em colunas).

 

Em seguida criei as divs box07 dentro da div layout, com as seguintes formatações:

#box07{
	height: 9px;
	width: 800px;
	background-image: url(../images/image07.jpg);
	clear: both;	
}

Alem das dimensões especificadas usei “clear: both” com objetivos e colocar a div debaixo das divs box04, box05 e box06.

 

Em seguida criei as div box08 dentro da div layout, com as seguintes formatações:

#box08{
	background-image: url(../images/image09.jpg);
	width: 656px;
	margin-left: 83px;
	clear: both;
}

Alem das dimensões especificadas usei “clear: both” com objetivos e colocar a div debaixo da div box07.

 

 

No firefox e no Dreamweaver consigo visualizar o Layout normalmente, porém quando o mesmo e visualizado no IE aparece uns espaçamentos entre as divs box01 box02 e box03

 

Box01 / box02

____________________________

Espaçamento

____________________________

Box03

 

O mesmo ocorre entre as demais div, sempre na horizontal.

 

Não tenho muita experiência com CSS, porém não fiz uso dos recursos: padding e margin, é certo na box08, para aparece tais espaçamentos.

[Paulo de Tarso F. M. 24]

Aparentemente seu código não apresenta erros... Porém, refiz e testei no IE6, e não apareceu nenhum espaçamento... Veja o código:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>TÍtulo do Site</title>
		<style type="text/css">
		#layout {
			width: 800px; 
			margin: 0 auto;
		}
		#box01 {
			height: 106px;
			width: 347px;
			float: left;
			background-color: #ccc;
		}
		#box02 {
			height: 106px;
			width: 453px;
			float: right;
			background-color: #fc0;
		}
		#box03 {
			height: 36px;
			width: 800px;
			clear: both;
			background-color: #0cf;
		}
		#box04 {
			height: 207px;
			width: 77px;
			float: left;
			background-color: #ffc;
		}
		#box05{
			height: 207px;
			width: 668px;
			float: left;
			background-color: #cff;
		}
		#box06{
			height: 207px;
			width: 55px;
			float: right;
			background-color: #ababab;
		}
		#box07{	
			height: 9px;
			width: 800px;
			clear: both;
			background-color: #cacaca;
		}
		#box08{
			width: 656px;
			margin-left: 83px;
			clear: both;
			background-color: #dfdfdf;
		}
		</style>
	</head>
	<body>
		<div id="layout">
			<div id="box01">Box 01</div>
			<div id="box02">Box 02</div>
			<div id="box03">Box 03</div>
			<div id="box04">Box 04</div>
			<div id="box05">Box 05</div>
			<div id="box06">Box 06</div>
			<div id="box07">Box 07</div>
			<div id="box08">Box 08</div>
		</div>
	</body>
</html>

Veja o exemplo on-line.

 

Estranho... Mas, de qualquer forma, veja se encontra alguma coisa errada...

 

Até mais!

[Fkarol 0]

Porém meu código ainda esta com algum problema, depois de fazer as seguintes alterações no código do Paulo de Tarso F. M.

#box08{
		width: 656px;
		margin-left: 83px;
		clear: both;
		background-image: url(images/image09.jpg);
		}

		<div id="layout">
			<div id="box01"><img src="images/image01.jpg" alt="" width="347" height="106" /></div>
			<div id="box02"><img src="images/image02.jpg" alt="" width="453" height="106" /></div>
			<div id="box03"><img src="images/image03.jpg" alt="" width="800" height="36" /></div>
			<div id="box04"><img src="images/image04.jpg" alt="" width="77" height="207" /></div>
			<div id="box05"><img src="images/image05.jpg" alt="" width="668" height="207" /></div>
			<div id="box06"><img src="images/image06.jpg" alt="" width="55" height="207" /></div>
			<div id="box07"><img src="images/image07.jpg" alt="" width="800" height="9" /></div>
			<div id="box08">
			  <p>tetse</p>
			  <p>teste</p>
			  <p>teste</p>
			</div>
		</div>

Para mais esclarecimentos do problema, segue um link com uma imagem ilustrativa do problema.

 

Imagem

 

De acordo com a imagem 01 no IE a pagina e exibida corretamente, porem a imagem 03 apresenta uns espaçamentos entre as div, quando a pagina e visualizada no FireFox.

 

 

Obs a imagem 02 apenas exibe um escopo das divisões das divs, claro sem muita exatidão rsrs...

 

Mais uma vez obrigada pela ajuda!!!