Pb affichage IE7 : décalage des blocs avec float

bonjour,

j'ai réalisé un site web qui ne pose aucun souci sous IE6 ni firefox comme le montre le screen :
IE6

or sous IE7, j'ai des gros pb d'affichages liés au CSS...
IE7

en fait j'affiche dans un bloc principal des sous blocs que je mets en float:left puis float:right alternativement afin de condenser l'affichage. Je renseigne donc une largeur pour chacun des blocs (en pourcentage) qui passe sous FF et IE6 mais sous IE7 les blocs prennent la largeur des champs qu'ils contiennent et se collent tout à gauche ou tout à droite donc c'est pas du tout centré !
De plus le bloc "Situation" et "caractérisation du site" sont décalés puisqu'ils devraient se trouver en dessous la zone de saisie "Mentions et/ou indices de l'existence du site..."

vous verrez plus clairement sur les screens, je vous post aussi le code...


HTML :

<div id="col2">
  	<div class="story">
	<div id="form_alert">
	<div id="signupbox">
		<div id="signupwrap">
		<form action="maj.php" method="post" name="form" id="form">
			<p id="champs_obligatoires">*&nbsp; Champs obligatoires</p>
			
			<div id="renseignements">
			<fieldset>
			<legend>Renseignements</legend>
			
			<p>
				<label for="departement" class="label">*&nbsp;Département&nbsp;&nbsp;</label>
				<select name="departement" id="departement" onChange="ajax_departement()" <? if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' disabled'; ?> >
					<?php
					[...]
					?>
				</select>
				<span id="aff_departement">
			</p>
			
			<p>
				<label for="commune" class="label">*&nbsp;Commune&nbsp;&nbsp;</label><input type="text" name="commune" id="commune" maxlength="30" size="25" value="<? echo $row['commune'].'"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span id="aff_commune">
			</p>
			
			<p>
				<label for="lieu_dit" class="label">*&nbsp;Lieu-dit&nbsp;&nbsp;</label><input type="text" name="lieu_dit" id="lieu_dit" maxlength="30" size="25" value="<? echo $row['lieu_dit'].'"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span id="aff_lieu_dit">
			</p>
			
			<p>
				<label for="nom_site" class="label">Nom du site&nbsp;&nbsp;</label><input type="text" name="nom_site" id="nom_site" maxlength="30" size="25" value="<? echo $row['nom_site'].'"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span id="aff_nom_site">
			</p>
			
			<p>
				<label for="num_ea" class="label">Numéro d'EA&nbsp;&nbsp;</label><input type="text" name="num_ea" id="num_ea" maxlength="8" size="8" onchange="ajax_num_ea()" value="<? echo $row['num_ea'].'"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span class="hint2">Numéro d'entité archéologique<span class="hint-pointer">&nbsp;</span></span>&nbsp;<img src="images/icon_help.gif" class="aide" onMouseOver='this.parentNode.getElementsByTagName("span")[0].style.display = "inline";' onMouseOut='this.parentNode.getElementsByTagName("span")[0].style.display = "none";' />
				<span id="aff_num_ea"></span>
			</p>
			
			</fieldset>
			</div>
			
			<div id="decouverte">
			<fieldset>
			<legend>Découverte</legend>
			
			<p>
				<label for="inedit" class="label">Site inédit&nbsp;</label><input type="checkbox" name="inedit" id="inedit" <? if($row['inedit']==1) echo 'checked="checked"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' disabled'; ?> /> 
			</p>
			
			<p>
				<label for="decouvreur" class="label">Personne ayant découvert le site&nbsp;&nbsp;</label><input type="text" name="decouvreur" id="decouvreur" maxlength="50" size="25" value="<? echo $row['nom_decouvreur'].'"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span id="aff_decouvreur">
			</p>
			
			<p>
				<label for="date_decouverte" class="label">Date de la découverte&nbsp;&nbsp;</label><input type="text" name="date_decouverte" id="date_decouverte" maxlength="10" size="10" value="<? if($row['date_decouverte'] != "") echo datefr($row['date_decouverte']); ?>" <? if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> />
				<span id="aff_date_decouverte">
			</p>
			
			</fieldset>
			</div>
			
			<hr />
			
			<div id="temoignages">
			<p style="font-weight:bold" id="temoins">Mentions et/ou indices de l'existence du site, dépouillement, témoignages...&nbsp;&nbsp;<br>
			<textarea name="temoignages_existence" id="temoignages_existence" rows="6" cols="65" <? if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' readonly'; ?> ><? echo $row['temoignages_existence']; ?></textarea>
			<span id="aff_temoignages_existence"></span></p>
			
			<span class="titre">Informations</span>
			</div>

			<div id="caracteristiques">
				<div class="box">
					<p class="gras">*&nbsp;Situation</p>
					<?php
					[...]
					?>
				
				</div>
			
				<div class="box">
					<p class="gras">*&nbsp;Immersion</p>
					<label for="PE" class="gras">Permanente&nbsp;</label><input type="radio" name="immersion" value="PE" id="PE" <? if($row['immersion']=='PE') echo 'checked="checked"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' disabled'; ?> /><br>
					<label for="EX" class="gras">Exceptionnelle&nbsp;</label><input type="radio" name="immersion" value="EX" id="EX" <? if($row['immersion']=='EX') echo 'checked="checked"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' disabled'; ?> /><br>
					<label for="HE" class="gras">Hors d'eau&nbsp;</label><input type="radio" name="immersion" value="HE" id="HE" <? if($row['immersion']=='HE') echo 'checked="checked"'; if($_SESSION['etat']==1 && ($row['pseudo'] != $_SESSION['login'])) echo ' disabled'; ?> /><br>
				</div>
				<br>
			</div> <!-- caracteristiques -->
			
			
		</form>
		</div>
	</div>
	</div>
</div>
	 <!--story--> 
  </div>

CSS :

body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background-color: #cccccc;
	background-image:  url("img/bg_grad3.jpg");
	background-attachment: fixed;
}

.clear, hr{
	clear: both;     
  	visibility: hidden;
	display:block;
	height: 0;
	font-size: 1px;
	line-height: 0px; 
}

#renseignements{
	width:52%;
	float:left;
}

#decouverte{
	width:46%;
	float:right;
}

#temoignages{
	width:96.3%;
	float:left;
}

#caracteristiques{
	width:35%;
	float:left;
}

#form_alert #signupbox {
	width: 100%;
	text-align: left;
	margin: 0em auto;
}

#form_alert #signupwrap {
	float:left;
	border: 2px solid #CBDCED;
	text-align: left;
	padding: 30px 10px 0px 10px;
	clear: both;
	margin-bottom:10px;
}

/************** CONTENU DE LA PAGE ******************/

#content{
	position:absolute;
	top: 179px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
}

/*************** COLONNE DE DROITE DU CONTENU DE LA PAGE *****************/

#col2{
	margin:0px 0px 0px 178px;
	padding: 0px 10px 0px 0px;
	border-left: 1px solid #ccd2d2;
}

/***************** Contenu texte de la page *******************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 80%;
}

.story h3{
	font-family: Arial,sans-serif;
	font-size: 15pt;
	font-weight: bold;
	color: #000000;
}

.story p{
	padding: 0px 0px 10px 0px;
}

merci par avance pour votre aide !!!
Modifié par naheulbeuk (20 Feb 2009 - 18:37)

up

j'ai besoin de vous svp...