Bloc et compatibilité IE6

Bonjour,

Dans ma page j'ai deux blocs qui doivent être côté à côté.
J'ai l'obligation d'être compatible avec IE6 et mes blocs s'affichent l'un sous l'autre
Je ne m'en sors pas ! Pouvez-vous m'aider ?

Mon code html est le suivant :

<div id="ligne1"><p>Mes envies </p>
    <ul>
      <li>
      	<h1> produit 1 </h1>
        <a href="#"><img src="#" alt="" width="268" height="85" /></a>
   <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br />
          <a class="viewproject" href="#">Voir le site <img src="imgs/fleche.jpg" alt="voir le site" width="15" height="15" /></a></p>
      </li>
      <li>
      	<h1>Produit 2</h1>
        <a href="#"><img src="#" alt="" width="268" height="85" /></a>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. <br />
          <a class="viewproject" href="#">Voir le site <img src="imgs/fleche.jpg" width="15" height="15" /></a></p>
      </li>
    </ul></div> 

Les css :

#projects{
	padding:15px 0;
	}
#projects ul{
	display:block;
	width:620px;
	height:226px;
	margin-bottom:40px;
	}

#projects li{
	display:inline-block;
	/*float:left;*/
	overflow:hidden;
	width:270px;
	margin:0 18px 0 18px;
	color:#666666;
	background-color:#ffffff;
	border:1px solid #cccccc;
	}

#projects li h1{
	display:block;
	margin:0;
	color:#999999;
	font-size:12px;
	line-height:22px;
	padding-left:10px;
	background:#f0f0f0;
	}

#projects li p{
	display:block;
	float:right;
	width:262px;
	padding-left:8px;
	color:#666666;
	line-height:16px;
	font-size:12px;
	}
#ligne1{
	width:630px;
	height:290px;
	background:url(imgs/bg1.gif) no-repeat;
}

#ligne1 p{
	font-family: Arial, Helvetica, sans-serif; 
	font-size:18px;
	font-weight:bold;
	color:#ffffff;
	padding-left:20px;
	padding-top:5px;
}

bonjour,

pour retrouver le comportement 'inline-block' attendu sur des element de type block dans IE6, il faut jouer sur le haslayout en les faisant basculer tout d'abord en 'display:inline;' et ensuite activé le haslayout via une regle propriétaire 'zoom:1;' (ça vaut pour IE7 aussi).

Les commentaires conditionnels te seront utiles.

GC

Merci, je vais tester !

Autrement, il devrait être possible de travailler avec float plutôt que display:inline-block. Une bonne connaissance de la propriété float, de sujets comme le dépassement des flottants et des bugs d'IE6 liés à cette propriété (double margin bug et three pixel jog) est fortement recommandée.