Forum Clubic

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

Bonjour tout le monde !

J’ai un problème sur un design, mais 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 :p), 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 :confused:

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 :frowning:
Merci d’avance !

Vire les espaces, et redéfinit les marges pour le formulaire (#header_menu_login form) : il doit en ajouter alors qu’il ne devrait pas.

Ceci dit, j’ai déjà eu le problème mais je me rappelle pas de comment je l’ai résolu (peut-être à coup de pub contre IE?)

Merci pour ta réponse !
Désolé pour les espaces, je les ai enlevé. Mais que veux-tu dire par coup de pub ?
Si tu te souviens de la façon de s’en débarrasser, je suis preneur
Si ça peut aider voilà une autre image plus parlante du problème : http://www.73studio.net/_div/ie6_2.png

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 ? :confused:

Oui c’est normal que les boites ne soient pas dans le conteneur…
Les différentes parties du content (content_left, center et right) sont en float…
Met les en display: inline a la place de float: left et ca devrait aller mieux :wink:

Salut !
J’ai testé ta proposition pour le display sur les content left, center et right mais ça m’affiche les boite une par ligne ce coup ci :confused:

Alors j’ai remis comme c’était et dans mon code xhtml j’ai déplacé la div # right_space juste à la fin de #conteneur. Grace à ça j’ai le background-image qui s’affiche, mais toujours pas cadre bleu autour de mes boites :frowning:

Cependant mon problème d’espace au niveau de mon header n’est pas réglé. Si quelqu’un aurait une solution :confused: