Menu horizontal avec images séparatrices sous IE7

bonjour à tous !

Je cherche à créer un menu simple :
menu horizontal, avec entre chaque item une image séparatrice

voici mon code actuel :

<ul id="menu">
     <img class="pipe" src="../images/pipe.png" alt="pipe" title =""/>
     <li>
          <a href="item1.php" title="ITEM1"><span>ITEM1</span></a>
     </li>
     <img class="pipe" src="../images/pipe.png" alt="pipe" title =""/>
     <li>
          <a href="item2.php" title="ITEM2"><span>ITEM2</span></a>
     </li>
     <img class="pipe" src="../images/pipe.png" alt="pipe" title =""/>
     <li>
          <a href="item3.php" title="ITEM3"><span>ITEM3</span></a>
     </li>
     <img class="pipe" src="../images/pipe.png" alt="pipe" title =""/>                  
</ul>

#menu {
	clear:both;
	margin:0px 0px 0px 40px;
	padding:0px;
	list-style-type:none;
}

#menu li{
	float:left;
}

.pipe{
	float:left;
	margin-top:5px;
}

#menu li a {
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#CDCDCD;
	padding:7px 20px 6px 20px;
	display:block;
}

Tout cela fonctionne bien sous FF, Safari et IE8

Par contre, j'ai un souci sous IE7 avec mes "pipes".
Ils apparaissent en fait 1 ligne en dessous de la ligne du menu.
Comment puis-je m'y prendre pour être compatible avec ce navigateur ?

Hello,

Éventuellement, et surtout si ces pipes n'ont pas vraiment de sens sémantique, tu peux les mettre en background. L'idée, c'est d'agrandir tes éléments de listes vers la gauche (par ex.) en donnant un padding-left plus élevé et de mettre ton image en background dans le "trou" créé.

Voici le code remanié

<ul id="menu"> 
     <li> 
          <a href="item1.php" title="ITEM1"><span>ITEM1</span></a> 
     </li> 
     <li> 
          <a href="item2.php" title="ITEM2"><span>ITEM2</span></a> 
     </li> 
     <li> 
          <a href="item3.php" title="ITEM3"><span>ITEM3</span></a> 
     </li>                
</ul>

#menu { 
    margin:0px 0px 0px 40px; 
    padding:0px; 
    list-style-type:none; 
} 
 
#menu li{ 
    display: inline-block;
    padding-left: 20px; /*c'est un exemple. tout dépend de la taille des pipes.*/
    background: url("tonchemin/pipe.png") no-repeat;
}
 
#menu li a { 
    font-family:Arial, Helvetica, sans-serif; 
    letter-spacing:-1px; 
    color:#CDCDCD; 
    padding:7px 20px 6px 20px; 
    display:block;
}

Voilà, j'imagine qu'avec cette solution c'est plus propre, plus logique et que ça devrait marcher sur IE7

Joyeux noel.

yeah.
merci effectivement, je prefere comme cela, et de plus ça fonctionne sous IE7.

encore quelques soucis à regler, mais pour ce point la, c'est nickel

merci beaucoup !