[Résolu] IE7 - mauvaise application d'un js de modification css

Bonjour,

Je bloque sur un morceau de code javascript qui pose problème sous IE7 (mais qui passe sans soucis sous IE6). L'objectif du script est d'appliquer un style="clear:both;" sur tous les éléments pairs d'une liste.
Ce qui me fait dire qu'il s'agit d'un problème de js, c'est que l'application manuelle du style="clear:both;" fonctionne parfaitement.

Voici un screenshot du résultat attendu (et obtenu sous IE6 et FF entre autres) :


Et voici un screenshot du résultat obtenu (sous 7) :


Il semblerait que le problème se pose à partir du 4ème item...
Voici le code incriminé :

/*Les listes paires vont à gauche */
function init_2col()
{
	// On récupère les listes du coeur de page (contenu) dans une variable (un array), ici ul.
	// les li "impairs" sont forcés à gauche
	var ul=document.getElementById("contenu").getElementsByTagName("ul")[0];
	var enf = ul.childNodes; /* li et text */
	var nb_enf = enf.length;
	var gauche = true;
	var prec = 0;
	for (var i = 0 ; i < nb_enf ; ++i)  {
		if (enf[i].nodeName == "LI")
		{
			if (gauche == true)
			{	
//			document.write(" -- i " + i+ ", height " + enf[i].style.height);
				enf[i].style.clear = "both";
				gauche = false;
				prec = i;
			}
			else {
				gauche = true;
				enf[i].style.height = [_prec].offsetHeight;
			}
		}
	}
}
window.onload = init_2col;

[i:]Note : l'undescore présent après le crochet ouvrant dans la dernière ligne a été rajouté volontairement pour éviter un conflit avec une image du serveur.[/i]
Quelqu'un saurait d'où vient le problème ?
Merci d'avance [/i][/i][/i]
Modifié par Corinne S. (08 Jan 2010 - 13:57)

Hello,

pour moi c'est un problème au niveau du rendu. D'ailleurs l'affichage se chevauche au niveau du du cadre n°5 car le cadre n°3 et plus long que le cadre n°2. Il suffirait de rajouter des items dans le cadre n°1 pour voir si ça provoque un autre chevauchement.

Peut être tester clear : right ?
Modifié par bzh (08 Jan 2010 - 13:27)

Salut Corinne,

Tu as mis :

enf[i ].style.height = [_prec].offsetHeight;

ce qui fait que tu appliques la hauteur de la colonne de gauche à celle de droite, et ce, que la colonne de droite soit plus longue que celle de gauche ou non.

Au vu de tes captures d'écran, il ne s'agit pas là d'un bug qui n'apparaitrait qu'à partir du 4ème item mais plutôt lorsque le contenu de la colonne de droite est plus long que celui de la colonne de gauche.

En somme, pourquoi appliquer cette hauteur ? Est-ce vraiment utile ?

@bzh : Si c'était un problème de rendu, l'application directe des styles ne fonctionnerait pas.

@koala64 : Parfait ! L'erreur était bien celle que tu as souligné.

Note : L'affectation de la hauteur est nécessaire à IE6 qui s'emmêle les pédales sans ça. La modification suivante règle le problème.

			else {
				gauche = true;
				if (enf[_i].offsetHeight < enf[_prec].offsetHeight) 
				{
					enf[_i].style.height = enf[_prec].offsetHeight;
				}
			}

Merci Koala
Modifié par Corinne S. (08 Jan 2010 - 14:45)