Discussion :

[oneTime]

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... Je ne parviens pas à arranger ça.

Voici le code...

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

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 !

[c_s_s]

Bonjour,

Après un rapide test sous IE6, je n'obtiens pas le même résultat que toi.
Chez moi la portion de ode que tu as donné s'affiche correctement.

Le problème vient peut-être d'ailleurs du coup.

[oneTime]

Je développe en local désolé pas d'exemple en ligne.
Et le fait que ce soit en PHP ne gêne en rien... Non ?

[c_s_s]

Le fait que ce soit en PHP n'est pas bloquant, mais pour voir le rendu il faut que j'enlève tout le code PHP qui ne sera pas interprété par un éditeur HTML.

Là ça va parce que la portion de code n'est pas énorme, mais si tu avais donné une portion de code de plusieurs centaines de lignes, je n'aurais pas pris cette peine.

Sinon, comme je te le disais plus haut, je ne vois rien d'anormal sur IE6 en ce qui concerne la portion de code que tu as fournis.

[oneTime]

D'accord.
Tu as testé sous IE6 et tu ne vois rien d'anormal ???

Je me suis peut-être trompé de problème : cela vient peut-être d'un problème de javascript alors... Car il y en a pour gérer l'afficher/masquer...

[oneTime]

J'ai une piste à force de tester et retester...

Le problème vient de là :

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

Lorsque je supprime les propriétés de position, la disposition des champs n'est plus très agréable mais sous FF et IE6 le toggle s'affiche bien sans flottement des champs sur IE6.
N'existe-t-il pas un moyen de remédier à ça ?