Backgroud-repeat et IE

Bonjour,

j'ai mis en place en arbre javascript (http://blog.aguillem.fr/25-tutoriel-xhtml-css-javascript-faire-une-arborescence-accessible).

Cependant j'ai un soucis de style sous IE.

Voici le rendu sous IE 8 :
http://img193.imageshack.us/img193/5324/85111117.jpg

et voici le rendu sous Firefox :
http://img136.imageshack.us/img136/1892/firefoxo.jpg

Comme vous pouvez le voir il y a des problèmes avec les lignes verticales sous IE (elles ne sont pas répétées ou il y en a là ou ça ne devrait pas).

Voici le style CSS de cet arbre :

#arborescence {
	padding: 5px;
}

#arborescence ul#racine {
	margin: 0px;
	padding: 0px;
}

#arborescence ul, #arborescence li {
	text-align: left;
	list-style-type: none;
	list-style-image: none;
}

#arborescence li {
	position: relative;
}

#arborescence ul.niv1 ul {
	background: url("../../image/line.gif");
	background-repeat: repeat-y;
}

#arborescence li ul.active {
	display: block;
}

#arborescence li ul.last {
	background: none;
}

#arborescence img {
	position: relative;
	width: 19px;
	height: 20px;
	margin-bottom: -4px;
	margin-right: 2px;
}

#arborescence img.clic {
	cursor: pointer;
}

Et le code simplifié ressemble à ça :

<ul id="racine">
	<li><a href="arbo.php">Ordinateurs</a>
		<ul id="niv1" class="niv1">
			<li><img src="img/join.gif" alt="" /><a href="?menu=pc">PC de bureau</a></li>
			<li><img src="img/minus.gif" alt="[+]" class="clic" /><a href="?menu=composantspc">Composants PC</a>
				<ul class="niv2">
					<li><img src="img/join.gif" alt="" /><a href="?menu=composantspc&smenu=boitiers">Boitiers</a></li>
					<li><img src="img/join.gif" alt="" /><a href="?menu=composantspc&smenu=processeur">Processeur</a></li>
					<li><img src="img/joinbottom.gif" alt="" /><a href="?menu=composantspc&smenu=alimentation">Alimentation</a></li>
				</ul>
			</li>
			<li><img src="img/join.gif" alt="" /><a href="?menu=portable">Portable</a></li>
			<li><img src="img/minus.gif" alt="[+]" class="clic" /><a href="?menu=composantsportable">Composants Portable</a>
				<ul class="niv2 last">
					<li><img src="img/join.gif" alt="" /><a href="?menu=composantsportable&smenu=memoire">Mémoire</a></li>
					<li><img src="img/join.gif" alt="" /><a href="?menu=composantsportable&smenu=memoire&smenu2=corsair">Corsair</a></li>
					<li><img src="img/joinbottom.gif" alt="" /><a href="?menu=composantsportable&smenu=memoire&smenu2=kingston">Kingston</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Je vous préviens, je ne suis pas un pro du CSS (malheureusement ).

Voila quelqu'un a-t-il une idée pour résoudre ce problème ? Apparemment ça viendrait du background-repeat...
Modifié par hacksi (04 Aug 2009 - 14:49)

Après avoir étudier le problème, il semblerait que toute les lignes verticales sont bien affichiées ais qu'IE les décalent sur la droite ce qui les fait se superposer. Cependant je n'ai pas réussi à corriger le problème.

Je n'ai pas réussi à résoudre le problème mais j'ai réussi à le contourner.

Avant j'affichais la ligne verticale sur les éléments ul, et là je les ai mis sur les li et je n'ai plus de problème. Je poste quand même le code qui fonctionne si ça peut aider quelqu'un.

Voici le code pour détecter le dernier li à l'aide de javascript :

function StyleTheLastLi()
{
	var uls = document.getElementsByTagName('ul');
	var liNodes = []; 

	for(var index=3; index < uls.length; ++index)
	{
		count = 0;
		for (var i = 0; i < uls[index].childNodes.length; i++) {    
			if (uls[index].childNodes[i].nodeName == "LI") 
			{        
				count++;   
			}
		}  
		uls[index].childNodes[count-1].id = 'lastLi';
	}
}

On voit donc que je me contente d'appliquer un style au dernier li fils, après libre à vous d'appliquer le style que vous voulez, moi je me contente de mettre un background: none;

Donc voila ce problème résolu.

Cependant il reste une coquille sous IE.

Il s'agit donc d'un arbre qui se déroule et s'enroule selon ce que l'on veut. Cependant sous IE ça fonctionne pendant un temps et après il pète une câble : lorsque l'on replis certains éléments il les au éléments supérieurs. Cela a donc comme conséquence d'avoir du texte complétement superposé.

Quelqu'un a-t-il une idée ?[/i]