Bonjour bonjour !

Je rencontre un problème majeur avec IE6 dans la réalisation d'un "toggle" s'apparentant à une sorte d'afficher/masquer.

Voici le résultat escompté (avec Firefox tout est ok) :



Et la cata sous IE6 :



Le souci sous IE6 est que les champs sont affichés directement et "flottent" au dessus de tout le formulaire... Comme si les div change_email, change_pass etc... ne voulaient pas se cacher au chargement de la page.
Code checké avec Firebug : tout est ok

Je ne parviens pas à arranger ça.

Je vous donne tout ce qu'il faut...

CSS
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
31
32
33
34
35
36
37
38
39
40
41
 
.label_form {
padding:10px;
position: relative;
display: block;
width: 400px;
border-bottom:1px solid #ccc;
height: 2.0em;
}
 
.input_form {
clear:both;
padding:3px;
border-left:3px solid #ffb400;
font-size:14px;
position: absolute;
left: 16em;
}
 
#form_profil {
  width:700px;
  margin-left:auto;
  margin-right:auto;
  font-size:12px;
}
 
#toggle_email, #toggle_pass, #toggle_infos, #toggle_confidentialite {
height:15px;
width:700px;
margin:0 auto;
padding:7px;
cursor:pointer;
background-color:#EEE;
border:1px solid #DDD;
}
 
#change_email, #change_pass, #change_infos, #confidentialite {
padding:5px 0;
margin-left:10px;
width:700px;
}
Javascript
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
 
<script language="javascript" type="text/javascript">
 
window.addEvent('domready', function(){
 
   var mySlide1 = new Fx.Slide('change_email', {duration:200});
   mySlide1.hide();
 
   var mySlide2 = new Fx.Slide('change_pass', {duration:200});
   mySlide2.hide();	
 
   var mySlide3 = new Fx.Slide('change_infos', {duration:200});
   mySlide3.hide();	
 
   var mySlide4 = new Fx.Slide('confidentialite', {duration:200});
   mySlide4.hide();
 
   $('toggle_email').addEvent('click', function(e){
      e = new Event(e);
      mySlide1.toggle();
      e.stop();
   });
 
   $('toggle_pass').addEvent('click', function(e){
      e = new Event(e);
      mySlide2.toggle();
      e.stop();
   });
 
   $('toggle_infos').addEvent('click', function(e){
      e = new Event(e);
      mySlide3.toggle();
      e.stop();
   });
 
   $('toggle_confidentialite').addEvent('click', function(e){
      e = new Event(e);
      mySlide4.toggle();
      e.stop();
   });
 
});
 
</script>
HTML
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
 
<?php
echo "<form method=\"post\" name=\"form_profil\" id=\"form_profil\" action=\"\">";
   echo "<p>";
      echo "<div id=\"toggle_email\">Changer d'adresse email</div>";
        echo "<div id=\"change_email\">";
           echo "<label for=\"ancien_email\" class=\"label_form\">";
              echo "Adresse actuelle <input type=\"text\" name=\"ancien_email\" class=\"input_form\" value=\"api1000@gmail.com\" readonly />";
           echo "</label>";
           echo "<label for=\"nouvel_email\" class=\"label_form\">";
                echo "Nouvelle adresse <input type=\"text\" name=\"nouvel_email\" class=\"input_form\" />";
           echo "</label>";
           echo "<label for=\"confirm_nouvel_email\" class=\"label_form\">";
                echo "Confirmation <input type=\"text\" name=\"confirm_nouvel_email\" class=\"input_form\" />";
           echo "</label>";
        echo "</div>";
   echo "</p>";
echo "</form>";
?>
Je vous épargne le reste du PHP : c'est répétitif pour les div change_email, change_pass, change_infos, confidentialite et les toggle associés.

Pouvez-vous m'aider ?
Merci d'avance !