Discussion :

[Bibicmoi]

Bonjour à tous!
Voila, j'ai un problème (étonnant, non?) : j'ai un formulaire, avec des label et des input text à l'intérieur.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<form action="inscription.php" method="post">
 <fieldset style="width:60%;">
  <legend>Informations personnelles</legend>
  <div style="margin-left:10% !important;margin-left:3%">
   <label>Nom</label>
   <input type="text" name="nom" id="nom" value="" style="width:60%;" />
   <br /><br />
   <label>Prénom</label>
   <input type="text" name="prenom" id="prenom" value="" style="width:60%;" />
   <br /><br />
  </div>
 </fieldset>
</form>

Quand je saisis du texte à l'intérieur de l'input, tout se décalle sur la gauche (y a même des fois où le input s'agrandit dès la première lettre est tapée! )
Je suis pour le moment sur IE, je n'ai pas encore testé sous FF (chaque problème en son temps )
Quelqu'un a-t-il déjà rencontré le problème? L'a-t-il résolu?
Merci pour vos commentaires et vos suggestions.
Ciao.

[MasterOfChakhaL]

Salut,

J'ai eu il y a peu un souci qui ressemble au tien...

J'ai cru constater que IE n'appréciait pas les marges définies en pourcentage dans certaines situations. Au moment du hover, j'observais moi aussi un décalage qui apparaissait...

Essaie de remplacer tes valeurs en pourcentages par des valeurs en pixels, histoire de voir si le problème vient vraiment de là...

Le problème semblait apparaître quand il y avait des éléments flotttants en jeu, mais à vrai dire, je n'ai pas bien compris...

[Bibicmoi]

Malheureusement, le décalage est toujours existant, si je passe en px au niveau du div, au niveau du fieldset, au niveau des deux en même temps...
J'ai aussi essayé de virer le !important, en pensant que ça pourrait venir de là, mais non, ça n'est pas le cas.

[MasterOfChakhaL]

ben je n'ai pas IE sous la main, et le problème ne semble pas pouvoir être reproduit sur les autres navigateurs...

je passe donc la main...
Bon courage

[Bisûnûrs]

Aucun soucis sur IE6 avec le code que tu proposes.

Le problème doit venir d'autre part.

[Bibicmoi]

Ouaip. J'ai peut-être parlé un peu vite.
En fait, dans mon fieldset, j'ai mis un padding à 1%... Si je l'enlève, le décalage se fait moins.... Et si j'enlève le float left à mon label, plus aucun décalage!
Et pour empêcher que mon input text augmente, il faut effectivement que je mette la taille en pixel... C'est nul ce truc
Je crois que je vais mettre le padding en pixel, mais ça m'embête d'enlever le float à mon label... D'après tout ce que j'ai pu lire, tout le monde le met pour faire une jolie présentation à un formulaire... Pourquoi suis-je le seul à avoir un problème avec???

Petite précision, la feuille de style :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
fieldset{
    border : 1px solid #009966;
    /*_padding : 1%;*/
}
label{
    /*float : left;*/
    padding-top : 1%;
    margin-right : 1%;
    text-align : left;
    color : #2d4368;
    font-weight : bold;
    width : 90px;
}