Compataibiltié IE6 : comportement de background-image

Bonjour,

Me voici confronté à deux problèmes dans une mise en forme html/css compatible IE6, 7, 8 et FF. Vous trouverez en image jointe un visu du problème n°1.

Problème n°1 :
Sous IE6 (le fameux), un background-image avec repeat-y semble ne pas vouloir respecter les dimensions imposées en css, faisant ainsi exploser l'ensemble des éléments du bas de page.
Comment faire pour que les images se positionnent correctement les unes à la suite des autres (ce qui fonctionne parfaitement sous IE7, 8 et FF3.5).

Vous trouverez ci-dessous les codes css / html :

<img src="images/LPStep02_zoneValideBordGch03.png" height="33" width="15" alt="#" style="float:left"/>
				<img src="images/LPStep02_zoneValide04.jpg" height="33" width="223" alt="#" style="float:left" />
				<div class="ChoixCouleurs">
					<form id="#" onsubmit="#" method="#" action="#" name="formulaire">
						<input name="ChoixCouleur" type="radio" value="Orsatine" class="Couleur" >
						<img src="images/LPStep02_zoneValideOr.gif" width="123" height="33" alt="#" style="padding-left:5px; padding-right:30px;" />
						<input name="ChoixCouleur" type="radio" value="NoirIntense" class="Couleur">
						<img src="images/LPStep02_zoneValideNoir.gif" width="119" height="33" alt="#" />
					</form>
				</div>
				<a href="#" target="_self" title="Validez votre commande et/ou votre participation">
					<img src="images/LPStep02_zoneValide05.png" height="33" width="252" alt="#" style="float:left" />
				</a>
				
				<img src="images/LPStep02_zoneValideBordGch04.png" height="45" width="15" alt="#" style="float:left"/>
				<img src="images/LPStep02_zoneValide06.jpg" height="45" width="223" alt="#" style="float:left" />
				<img src="images/LPStep02_zoneValide07.jpg" height="45" width="470" alt="#" style="float:left" />
				<a href="#" target="_self" title="Validez votre commande et/ou votre participation">
					<img src="images/LPStep02_zoneValide08.png" height="45" width="252" alt="#" style="float:left" border="0" />
				</a>

.ChoixCouleurs {
	width:469px;
	height:33px;	
	_*margin:0px;
	_*padding:0px;
	background-image:url(../images/LPStep02_Offre_BgChoixCouleur.gif);
	background-repeat:repeat-y;
	float:left;

}
	
.Couleur {
	_*margin:0px;
	_*padding:0px;
	margin-left:10px;
	padding-left:10px;
	vertical-align: 8px;
	background-color:#d4e917;
}

form {
	_*margin:0;
	_*padding:0;
}

img {
	_*margin:0;
	_*padding:0;
	}

D'avance merci

(Le problème n°2 vient de trouver sa solution à base clear:both)
Modifié par Felipe (29 Jul 2009 - 15:57)

Bonjour,

ton code HTML contient du code en-ligne (attribut style) et ton code CSS n'est pas valide (hacks probablement: _*propriete: valeur;)

Mieux vaudrait utiliser les commentaires conditionnels ...

Bonjour,

Oui en effet j'utilise un hack pour la compatibilité IE6 car il s'agit de la solution immédiate que l'on m'a apporté pour résoudre un certain nombre de points.

En dehors de la mauvaise pratique, cela a t-il une incidence réelle sur ce problème d'affichage là ? (idem, je ne savais pas que le code en ligne, s'il ne concerne qu'un élément particulier, pose problème dans l'interprétation - tout précaution gardée qu'il ne soit pas en conflit avec une autre information).

Promis, les bonnes pratiques c'est pour bientôt