Positionnement DIV sous IE [Resolu]

Bonjour à tous,

J'ai un petit soucis avec mon gabarit de positionnement.

Sous firefox c'est presque ca (1 pixel blanc au dessus du bloc bleu turquoise), mais sous IE le bloc Rouge passe carrément a la fin du bloc bleu.

J'ai cherché sur la faq et openweb et je ne comprends pas d'ou viens le problème (hormis IE qui est un gros problème à lui tout seul...)

Voici l'exemple :
http://www.strasmedia.com

Voici mon code HTML :

<div id=all>
<!-- Header-->
	<div id=header>
		<div id=logo>
		<H1><A title="ACCUEIL" href="index.php"><SPAN>Mon_logo</SPAN></A></H1>
		</div>
		<div id=tools>
		</div>
	</div>
<!-- Navigation-->
	<div id=navigation>
	</div>
<!-- Contenu-->
	<div id=colonne_droite>
	</div>
	<div id=content>
	</div>
</div>

Et mon code CSS:

/* CSS Document */
/* General */

body {
	margin: 5px;
	padding: 5px;
}
H1 {
	PADDING: 0px;
	MARGIN: 0px; 
	LINE-HEIGHT: 28px; 
}
#all {
	PADDING: 0px;
	TEXT-ALIGN: left;
	margin: 0px auto;
	width: 944px;
}
/* Header */
#header {
	height: 54px;
	width: 944px;
}
#logo {
	PADDING: 0px ;
	MARGIN: 0px ;
	FLOAT: left;
	height: 54px;
	width: 374px;
}
#logo A {
	DISPLAY: block;
	WIDTH: 374px;
	height: 54px;
	background-color: #0066FF;
}
#logo SPAN {
	DISPLAY: none;
}

#tools {
	FLOAT: right;
	width: 569px;
	height: 54px;
	MARGIN: 0px;
	PADDING: 0px;
	background-color: #66FF00;
}
#recherche{
	width: 164px;
	height: 49px;
	float: left;
	margin-top: 2px;
	background-color: #CCCCCC;
}
#liens_rap{
	width: 207px;
	height: 49px;
	float: left;
	margin-top: 2px;
	background-color: #CC9900;
}
#indic_qual{
	width: 197px;
	height: 49px;
	float: left;
	margin-top: 2px;
	background-color: #FFCC00;
}
/* Navigation */
#navigation {
	PADDING: 0px;
	MARGIN: 0px;
	height: 15px;
	width: 944px;
	background-repeat: no-repeat;
	background-color: #FFFF00;
	float: left;
}
/* Contenu */
#content{
	PADDING: 0px;
	MARGIN: 0px;
	height: 484px;
	width: 741px;
	background-color: #FF0000;
	float: left;
}

#colonne_droite{
	PADDING: 0px;
	MARGIN: 0px;
	height: 484px;
	width: 203px;
	background-color: #00ffff;
	float: right;
}
IMG {
	BORDER: 0px;
}

D'avance merci
Modifié par Kalilu (13 May 2005 - 16:45)

Je viens de regarder un peu.
Dans tes positionnements, si tu veux par exemple mettre 2 blocs l'un a coté de l'autre et qui prennent toute la largeur de ta div principale (div all ici) il faut mettre 2 float: left et non un right et un left. Les float left se colleront a gauche dans l'ordre ou ils apparaissent dans le code. (cela vire le 1px du header !)
Sinon pour la partie basse j'ai essayé en mettant des % (par exemple 70%, 30%) et en metant du texte cela a l'air de marché. je et mets le code que j'ai modifié :

Le CSS :

#recherche{
	width: 164px;
	height: 49px;
	[b]float: left;[/b]
	margin-top: 2px;
	background-color: #CCCCCC;
}


#content{
	PADDING: 0px;
	MARGIN: 0px;
	height: 484px;
	[b]width: 70%;[/b]
	background-color: #FF0000;
	float: left;
}

#colonne_droite{
	PADDING: 0px;
	MARGIN: 0px;
	height: 484px;
        [b]width: 30%;[/b]
	background-color: #00ffff;
	[b]float: left;[/b]
}

En espérant que cela corresponde a ton attente. Y'a un tuto sur les positionnements qui est pas mal.

Juste pour ne pas perdre la réponse
A moins que tu n'ais perdu l'adresse du site.
Modifié par gilles6975 (13 May 2005 - 16:24)

Merci j'etais sur un autre sujet et je n'avais pas eut le temps de tester.
Je suis passer au placement absolue, ie et firefox sont beaucoup plus daccord

En tout cas merci pour ta réponse

@+