Fonction afficher cacher element avec display:block

Bonjour à tous,

J'ai fait une petite fonction javascript toute simple qui affiche ou cache une div lorsque l'on clique sur un bouton:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id,afficher,cacher)
{
        if(document.getElementById(id).style.display!="none")
        {
                document.getElementById(id).style.display="none";
                document.getElementById('bouton_'+id).value=''+afficher+'';
        }
        else
        {
                document.getElementById(id).style.display="block";
                document.getElementById('bouton_'+id).value=''+cacher+'';
        }
        return true;
}

Et voici un exemple d'utilisation:

Code:

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
31
32
33
34
35
36
37
38
<dt><strong><h2><input type="button" id="bouton_Autres/Divers" value="+" style="width:10px;" onclick="javascript:afficher_cacher('Autres/Divers','+','-');" />Autres/Divers</h2></strong></dt>
     <div id="Autres/Divers" class="Autres/Divers" style="display:none">
			<dd><em><h3>Documentation</h3></em></dd>		
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/8">Documentation</a></span>
                        <span class="decalage_fichiers">4,18 Mo</span>
                    </div>
 
			<dd><em><h3>Master</h3></em></dd>		
					<div class=even>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/6">Boot dell 360 PVP</a></span>
                        <span class="decalage_fichiers">2 Mo</span>
                    </div>
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/7">Master XP - Installation - V1A</a></span>
                        <span class="decalage_fichiers">1 Mo</span>
                    </div>
 
	</div>
<dt><strong><h2><input type="button" id="bouton_LEDA" value="+" style="width:10px;" onclick="javascript:afficher_cacher('LEDA','+','-');" />LEDA</h2></strong></dt>
     <div id="LEDA" class="LEDA" style="display:none">
			<dd><em><h3>Documentation</h3></em></dd>		
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/8">Documentation</a></span>
                        <span class="decalage_fichiers">4,18 Mo</span>
                    </div>
 
			<dd><em><h3>Master</h3></em></dd>		
					<div class=even>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/6">Boot dell 360 PVP</a></span>
                        <span class="decalage_fichiers">2 Mo</span>
                    </div>
					<div class=odd>
                    	<span class="titre_fichier"><a href="/frontend_dev.php/upload/7">Master XP - Installation - V1A</a></span>
                        <span class="decalage_fichiers">1 Mo</span>
                    </div>
 
	</div>

Sous Firefox ca fonctionne bien. Par contre sous IE 8, voila ce que ca me donne lorsque je déroule un élément:

http://img87.imageshack.us/img87/3577/capturenii.jpg

Au lieu de:

http://img191.imageshack.us/img191/6448/capture1ti.jpg

Sous IE 6 c'est encore pire: les éléments se placent partout sur la fenetre et le display:none ne fonctionne pas...

Merci de votre aide

Le slash n'est pas autorisé pour un id et perturbe probablement IE.

En remplacant par Autres seulement, le problème persiste...

J'ai fait pas mal de manipulation et j'en suis arrivé à la conclusion que ce qui me gène c'est la gestion de bords arrondis qui est effectué par du javascript (curvycorners.src.js) pour IE alors que pour Firefox c'est du CSS.

Si je retire l'appel à curvycorners.src.js, mon script fonctionne bien...

Une idée du pourquoi du comment?

J'imagine que le script fixe la hauteur de la div afin de pouvoir ajouter les éléments supplémentaires pour afficher les coins arrondis et passe le overflow en hidden, du coup la div ne se redimensionne pas automatiquement lors de la modification de son contenu.

D'accord! Du coup, il y a pas trop de solution, c'est ca??

Pour faire cohabiter les deux, il semble que non...

Foutu IE et sa mauvaise gestion!!! Vivement le CSS3...