IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

(Fx.Slide) decalage sous IE6


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Décembre 2006
    Messages
    102
    Détails du profil
    Informations forums :
    Inscription : Décembre 2006
    Messages : 102
    Par défaut (Fx.Slide) decalage sous IE6
    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 !

  2. #2
    Invité
    Invité(e)
    Par défaut
    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+
    Dernière modification par Invité ; 13/07/2008 à 00h01.

  3. #3
    Invité
    Invité(e)
    Par défaut
    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+

Discussions similaires

  1. Probleme de menu deroulant Sous IE6
    Par Althor dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/09/2006, 14h31
  2. [W3C] Parlons bordure et positionnement sous IE6.0 et FF
    Par bébé dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/10/2005, 19h47
  3. Réponses: 3
    Dernier message: 12/09/2005, 20h27
  4. [Windows 2000 server] Téléchargement FTP impossible sous IE6
    Par o151181 dans le forum Windows Serveur
    Réponses: 6
    Dernier message: 24/11/2004, 18h00
  5. URGENT : Request.Form ne marche pas sous IE6
    Par Laurent Outan dans le forum ASP
    Réponses: 9
    Dernier message: 16/07/2004, 15h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo