Mootools (Fx.Slide) decalage sous IE6

oneTime · 11/07/2008, 16h47

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 !

jlmag · 12/07/2008, 00h38

Salut, il semblerait que cela provient des balise <label>

Avec des <div> voilà ce que ça donne:

IE7 :

FF3 :

Le code qui n'est pas beau, mais cela était pour tester ...

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
<style type="text/css">
.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;
}
 
.label{
       width:700px;
       height:30px;
}
 
.texte{
       float: left;
       width: 200px;
       padding-left: 30px;
}
.input{
       float: left;
       width: auto;
       text-align: left;
}
 
hr {
   padding-top: 0px;
   margin-bottom:5px;
   margin-left: 20px;
   width: 70%; 
   size:1px;
   text-align: left;
}
 
</style>
<script language="javascript" type="text/javascript" src="js/mootools-1.2.js"></script>
<script language="javascript" type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
 
</head>
<body>
<form method="post" name="form_profil" id="form_profil" action="">
 
     <div id="toggle_email">Changer d'adresse email</div> 
	 <div id="change_email">
	    <div class="label">
	          <div class="texte"> actuelle </div><div class="input"><input type="text" name="ancien_email" class="input_form" value="api1000@gmail.com" readonly /></div>
	    </div>
	    <hr />
	    <div class="label">
                  <div class="texte">Nouvelle adresse </div><div class="input"><input type="text" name="nouvel_email" class="input_form" /></div>
	    </div>
	    <hr />
	    <div class="label">	   
		  <div class="texte">Confirmation </div><div class="input"><input type="text" name="confirm_nouvel_email" class="input_form" /></div>
	    </div>
	 </div>
 
</form> 
 
</body>
</html>

Si cela peu t'aider, A+

jlmag · 12/07/2008, 00h53

Rectification, si tu modifies seulement la déclaration des positions dans les classe .label_form et .input_form en les mettant en commentaires, cela fonctionne mieux pour le slide et avec ton code.

Avec ce code c'est mieux, mais il faut quand même replacer le texte et la balise <input>

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
 
.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;
}

IE7:

FF3 :

A+

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email