Modification du DOM et text qui se dédouble ! [RESOLU]

Salut à tous,

Aujourd'hui, une autre étrangeté de IE, dont je ne trouve pas la cause du comportement.

CE QUE JE VEUX FAIRE:

Tout con: Ajouter un <li> à un <ul> dynamiquement avec javascript. Tout ça marche très bien, sous IE et FF mais...

CE QUI SE PASSE:

...quasiment tout le texte présent dans la page se dédouble (non je n'ai rien bu, constatez par vous-meme !) . (IE uniquement)
Pourtant mon ajout javascript n'a rien d'extraordinaire, et mon text est contenu dans un malheureux div...

avant:


apres:


QUESTIONS:

Quelqu'un a t-il déja eu ce comportement ?
Qu'est-ce qui peux clocher ?

CODE:

HTML

<ul class="graphescontainer" id="graphecontent_74">
     <li id="graphecontainer_74429">
          <div class="graphetitle">
             ...              
             l'objet flash
             ...     
           </div>
           <div class="edittext" id="graphetext_74429">Text LOREM IPSUM</div>
    </li>

     D'autres LI

</ul>

Javascript (le code rajoute une barre de titre, voir deuxieme image):

function addBar(ref)
  {
    //generate a random number between 1 and 10 000 to avoid repetition
    var rdmnum = (Math.round((Math.random()*10000)+1));
    
    var globaldiv = parent.document.createElement('li');
      globaldiv.setAttribute('id', 'titlebar_'+ref+'_'+rdmnum);
      globaldiv.className = 'graphetitle';
    var left = parent.document.createElement('div');
      left.className = 'handle';
    var right = parent.document.createElement('div');
      right.className = 'options';
    var delink = parent.document.createElement('a');
      delink.setAttribute('href', 'javascript:deleteNode(\'titlebar_'+ref+'_'+rdmnum+'\')');
      delink.innerHTML='<img src=\"img/deletewhite.gif\" alt=\"Delete\">';
    var textspan = parent.document.createElement('span');
      textspan.className = 'edittitle';
      textspan.setAttribute('id', 'titlespan_'+ref+'_'+rdmnum);
      textspan.innerHTML = 'Click here to add text';
    
    //we add the elements to the DOM
    left.appendChild(textspan);
    right.appendChild(delink);
    right.innerHTML += ' ';
    globaldiv.appendChild(right);
    globaldiv.appendChild(left);
    parent.document.getElementById('graphecontent_'+ref).insertBefore(globaldiv,parent.document.getElementById('graphecontent_'+ref).firstChild);
    
    //events
    addEvent(textspan,'click',ShowEditInPlace);
    dragsort.makeListSortable(document.getElementById("containermovable"), setHandle);
  }

CSS:

div.edittext
{
  cursor: text;
  text-align: left;
  padding: 3px;
  padding-top: 2px;
  margin-top: 3px;
}

Merci d'avance pour vos réponses !!!
Modifié par vinzzonline (13 Jul 2006 - 13:22)