[DOM] Gestion du DOM sous IE 7

**air_v** · 17/01/2008, 11h27

Bonjour,
je souhaite ajouter dynamiquement des elements à une liste, en d'autre terme ajouter des <li> à un <ul>.
Alors j'ai un script qui me fabrique mon <li> et me fait un appendChild sur mon <ul>.
Dans FF l'ajout se passe bien et le rendu visuel est correct. Mais dans IE(7) je vois bien, via DOM inspector, l'ajout du <li> se faire dans le DOM, mais le rendu visuel explose complètement...
Le <li> existant disparait et je me retouve avec un grand <ul> complêtement Blanc.
Notez que mon <ul> s'agrandit bien (détection de la présence du contenu) mais que rien n'est visible et je n'ai pas d'erreur générée.

Quelqu'un a-t-il une idée du pourquoi du comment?
Un appendChild sour IE7 ne met pas directement à jour le visuel? il y a quelque chose à faire pour valider le DOM...?

Hervé

**javatwister** · 17/01/2008, 11h43

c'est dans la css de la liste qu'il faut résoudre le problème;

**le_chomeur** · 17/01/2008, 12h01

un bout de code aurait été le bienvenue ...

sinon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
	function $(IdElement){
		return document.getElementById(IdElement);
	}
	function ajouterLi(TextToAdd){
		var d = document;
		var NewLi =	d.createElement('li');
		//( un peu barbare mais bon  ;) )
		NewLi.innerHTML = TextToAdd
		var objUL  = document.getElementById( 'listeUl' );
		//On ajoute l'item en tout premier
		objUL.insertBefore( NewLi , objUL.firstChild );
	}
</script>
</head>
 
<body>
<input type="text" id="toto" value="" /><input type="button" onclick="ajouterLi($('toto').value)"; />
<ul id="listeUl">
	<li>toto</li>
	<li>titi</li>	
</ul>
</body>
</html>

A plus tard

**air_v** · 17/01/2008, 12h12

En fait je crois que c'est un probleme avec Sortable de scriptaculous...

Pour le bout de code c'est que c'est un gros bout de code... parce que mon LI contient un form qui contient un paquet de truc...
Mais si cela te tente je te l'envoi par mail

...

En tout cas merci.

Par contre, j'ai fait une version utltra réduite avec juste un petit LI, mais le style déconne souvent... Par exemple mon LI a un bord 'dotted' mais en fonction du scroll sur la page il apparait ou disparait a certain endroit...

**le_chomeur** · 17/01/2008, 13h39

effectivement , gros script ^^
( je suis déja sur un autre script pour quelqu'un du forum désolé )
mais tu peux essayer , d'utiliser les webtools de firefox / ie pour voir si une fois ton li ajouté, la classe lui est bien attribué
Piste a suivre

**air_v** · 17/01/2008, 14h48

Parce que ca peut toujours servir, il fallait que je mette dans le style du <li> :
overflow : hidden;

Et là ce n'est pas parfait mais ça fonctionne mieux

**le_chomeur** · 17/01/2008, 14h51

en quoi l'overflow a hidden corrige le problème ???
ça ne fait que masquer la barre de scroll et ne pas agrandir ta div / li si tu as définit une hauteur / largeur fixe ...

j'ai du raté une étape ...

**air_v** · 21/01/2008, 12h47

Tu sais avec IE 7 il ne faut trop se poser de question... mais comme le dit javatwister c'est dans la css de la liste qu'il fallait régler le problème... Après moi je ne suis pas développeur chez Microsoft...

Mais toujours est-il quand sans le 'overflow : hidden;' lorsque j'ajoute un élément a ma liste le DOM se met à jour mais le rendu visuel explose et lorsque je le met je vois bien mes éléments... Va comprendre...

Sinon un truc chiant c'est que IE modifie le code HTML... style si tu fais un alert/regarde le DOM du contenu d'un <div> qui contient du HTML tu constate qu'IE t'a mis toutes les balise en majuscule, supprimé toutes les ' " ' après les attributs de la balise et modifier l'ordre dans lequel ils sont; exemple :

code source :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div>
  <h2 id="id" class="maClasse"></h2>
</div>

te donne dans IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<DIV>
  <H2 class=maClasse id=id></H2>
</DIV>

ce qui moi me pose problème parce que je fais des recherches dans le code pour le parser après certain tag...

Bref, non seulement c'est pas standard mais en plus ça ennui tout le monde... Vive IE et plus généralement microsoft!!! ouais!!

[DOM] Gestion du DOM sous IE 7

JavaScript

Discussions similaires

Partager

Partager