[CSS] Problème affichage IE6 par rapport à FF2

Bonjour tout le monde !
Je viens de découvrir votre site (j'ai bien l'intention d'y rester , je me suis empressé de m'y inscrire pour avoir de l'aide sur un problème qui me chamboule depuis 2 jours.

Avant de commencer je dois dire que c'est mon premier xhtml/css !

Pour aller droit au but (non non j'aime pas le foot ), je vous poste ici 2 screenshots du site sous IE6 & FF2.

FF2: C'est parfait
IE6: Ca bug de partout

Comme vous pouvez le voir sous IE6, y a 3 bug... voir 4, mais étant novice je n'arrive pas a trouver la cause du problème

Il y a 2 espaces qu'il n'y pas sous FF2 (les 2 petites croix rose).
Ensuite il n'y aucun background-image qui ne s'affiche (le rond), et enfin il n'y pas l'encadré bleu autour des "boites".

Voici mon code :

xHTML:

<div id="main">

	<div id="header">
		<div id="header_img">
			<a href="http://www.avenirs.re"><img src="lib/img/logo_head.gif" alt="Avenirs" border="0" /></a>
		</div>
		<div id="header_form">
			<form id="search" name="search" method="post" action="#">
			<img src="lib/img/grey_arrow.gif" /> Rechercher : 
				<input name="keyword" type="text" size="15" />
				<select name="cat_search">
				  <option value="Membres">Membres</option>
				  <option value="Emplois">Emplois</option>
				  <option value="Formations">Formations</option>
				  <option value="Stages">Stages</option>
				</select>
				<input name="Submit" type="button" value="ok" />
			</form>
		</div>
	</div>
	
	<div id="header_menu">
		<div id="header_menu_link">
			<?php include('lib/php/menu.php'); ?>
		</div>
		<div id="header_menu_login">
			<form id="login" name="login" method="post" action="#">
				<input id="mail" name="mail" type="text" size="15" value="votre@email.com" onclick="this.form.mail.value=''"/>
				<input id="pass" name="pass" type="password" size="12" value="wtf?" onclick="this.form.pass.value=''" />
				<input name="Submit" type="button" value="login" />
			</form>
		</div>
	</div>
	
	<div id="main_conteneur">
	
		<div id="left_space">
		</div>
		
		<div id="right_space">
		</div>
		
		<div id="conteneur">
			<div id="content_left">
				<div class="box" id="left1">
					<h3>Left 1</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
				
				<div class="box">
					<h3>Left 2</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
			</div>
		
			<div id="content_center">
				<div class="box">
					<h3>Center 1</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
				
				<div class="box">
					<h3>Center 2</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
			</div>
			
			<div id="content_right">
				<div class="box">
					<h3>Right 1</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
				
				<div class="box">
					<h3>Right 2</h3>
					<p>
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
						This is a box with flexible height. This is a box with flexible height. This is a box with flexible height. <br />
					</p>
					<div id="ne_pas_effacer"><a class="bas">^</a></div>
				</div>
			</div>
		
		</div>
	
	</div>

</div>

CSS:

/*############*/
/* Balise Standard */
/*############*/

html { 
padding:0px;
margin:0px;
}

body {
background-color: #faf9f9;
font-size: 11px;
font-family: Verdana, Arial, Sans-Serif;
color:#3E3E3E;  
padding:0px;
margin:0px;
}

a { 
color:#91AFF7;
font-size: 10px;
background-color:transparent;
text-decoration: none; 
}

h1 {
font-size:11px;
padding-top:10px;
color: #564b47;
background-color: transparent;
margin: 0px; 
padding: 5px 20px 5px 20px;
}

input, select {
color:#8AAEEA;
font-size:10px;
background-color:#EFEFEF;
border: 1px solid #BFBFBF;
font-family:"Verdana";
}

input:focus {
border: 1px solid #4D80DF;
background-color:#FFFFFF;
}

/*######################*/
/* Position/Dimension des id div */
/*######################*/

#main {
min-width:800px;
}

/*		header		*/

#header {
height:40px;
background-image:url(../img/logo_head_bg.gif);
}

#header_img {
padding-left: 20px;
float:left;
}

#header_form {
float:right;
margin: 10px 20px 10px 20px;
}

/*		header_menu		*/

#header_menu {
font-size: 10px;
text-align: left;
color:#FFFFFF;
font-weight:bold;
padding:0px 20px;
margin:0px;
height: 22px;
background-image:url(../img/header_menu_bg.gif);
background-repeat:repeat-x;
}

#header_menu_link {
padding-left: 20px;
padding-top:3px;
float:right;
}


#header_menu_login {
float:left;
padding-top:2px;
}


/* 	space	*/

#right_space {
position:absolute;
right: 0px;
width: 50px;
height:100px;
margin: 0px; 
padding: 0px;
}

#left_space {
position: absolute;
left: 0px;
width: 50px;
height:100px;
margin: 0px; 
padding: 0px;
}

/*		main_conteneur		*/

#main_conteneur {
background-image:url(../img/body_bg.gif);
background-repeat:repeat-x;
z-index:0;
}

/*		conteneur		*/

#conteneur {
margin: 0px 50px 0px 50px;
border-left: 1px solid #4D80DF;
border-right: 1px solid #4D80DF;
border-bottom: 1px solid #4D80DF;
padding: 0px;
background-color: #ffffff;
overflow:hidden;
}

/*		 content : left, center, right 		*/

#content_left {
float:left;
width: 33.33%; 
top: 0px; 
}

#content_center { 
float:left;
width: 33.33%; 
top: 106px; 
overflow: auto;
}

#content_right {
float:left;
width: 33.33%; 
top: 106px; 
overflow: auto;
}

#content_right, #content_content, #content_left { 
padding:0px;
margin:0px;
} 

Voilà voilou, j'espère pouvoir régler mon problème ici
Merci d'avance !

Si ça peut aider voilà une autre image plus parlante du problème sous IE6 : Image

Il y a toujours les espaces bizarre (toujours pas trouvé comment régler ça). Mais mes "boites" ne sont pas dans #conteneur alors que sous FF2 oui.
Un soucis dans le CSS d'après vous ?
Modifié par TwiSter (15 Feb 2007 - 01:50)

Help please