Labels pas en face des inputs dans FireFox

Bonjour,

Je n'arrive pas à trouver la combine pour que les
label s'aligne sur les input dans FF.
Le pb survient quand on modifie les marges d'un
input:

Code:

---

1 2 3 4 5 6

<form method="post" action="script.php" name="my_form"> <label for="nom">Nom: </label> <input type="text" name="nom" size="10" maxlength="20" style="margin: 15px 0px 15px 0px;" /> </form>

---

Dans IE le label se recale sur la position du input, mais pas sous FF.
J'ai essayé de renseigner les marges dans le label mais rien n'y fait. :?
Quelqu'un aurait une solution ?

Merci

Bonjour,
tout d'abord un élément form ne peut contenir directement que des élément de niveau block.

Donc tu dois avoir (par exemple)

Code:

---

1 2 3 4 5 6 7

<form method="post" action="script.php" name="my_form"> <p> <label for="nom">Nom: </label> <input type="text" name="nom" size="10" maxlength="20" style="margin: 15px 0px 15px 0px;" /> <p> </form>

---

margin: 15px 0px 15px 0px; peut s'écrire margin: 15px 0; pas besoin de l'unité quand la valeur est à 0, ce qui est logique.

Les labels n'acceptent pas les marges verticales tout simplement parce que
ce sont des élément inline contrairement aux éléments de niveau block qui eux les acceptent (au même titre que les propriété de taille).

Display:block permet de le faire comporter comme un élément de niveau block mais génère un retour chariot avant et aprés.
Si tu souhaites doter le label de marges, tu dois donc lui attribuer la déclaration float:left qui génère une boîte de bloc en faisant passer la valeur de display à block automatiquement.

Mais le plus simple serait de mettre des marges verticales au p ou au form.

Info: pour aligner deux éléments inline entre eux, utiliser la propriété vertical-align.

pourquoi mets tu ce style ?
si tu enlève ton :

Code:

---

style="margin: 15px 0px 15px 0px;"

---

ça fonctionne

Sinon, essai ça :

Code:

---

1 2 3 4 5 6

<form method="post" action="script.php" name="my_form"> <label for="nom" >Nom: </label> <input type="text" name="nom" size="10" maxlength="20" style="margin: 15px 0px 15px 0px;vertical-align: middle;"" /> </form>

---

;)

EDIT: grillé par erwan31:mrgreen:

Merci pour ces renseignements ;)
ça fonctionne maintenant.
Le plus simple est effectivement de jouer avec les marges et le padding du <p>
Malheureusement le bouton image placé à la fin

Code:

---

1 2	<input type="image" src="button.gif" height="20" width="20" />

---

n'est plus aligné dans IE, :? (il descend vers le bas même avec vertical-align: middle).

Donc le plus efficace est finalement de mettre vertical-align: middle;
dans chaque input ce qui met tout le monde d'accord. ;)

La bonne syntaxe serai

Code:

---

<label>monLabel<input ... /></label>

---

me semble il

La bonne syntaxe serait plutôt :

Code:

---

1 2 3

<label for="idChamp">Libellé</label> <input type="text" id="idChamp" name="idChamp" />

---

:sm:

Citation:

---

Envoyé par SebastienM

La bonne syntaxe serait plutôt :

Code:

---

1 2 3

<label for="idChamp">Libellé</label> <input type="text" id="idChamp" name="idChamp" />

---

---

Exact ;)

Salut,

Citation:

---

Envoyé par Erwan31

tout d'abord un élément form ne peut contenir directement que des élément de niveau block.

---

C'est vrai pour le HTML strict et non transitional, or tintin72 n'affiche pas son doctype.

[edit] réponse un peu plus explicite.

Citation:

---

Envoyé par franculo_caoulene

Salut,
C'est vrai pour le HTML strict et non transitional, or tintin72 n'affiche pas son doctype.

---

Oui mais autant s'habituer dés à présent à respecter des règles de balisages
correctes et rigoureuses, quelqu'en soient les évolutions futur (HTML 5 ou XHTML 2).
Si dans le futur il est décidé que le site doive passer en type mime application/xhtml+xml et ben à ce moment là ça ne passera
clairement pas, contrairement au simple passage en doctype strict qui ne
fera qu'invalider le document sans générer d'erreurs d'affichage ou autre.

Après je ne dis pas que c'est la règle à suivre absolument, c'est juste
mon point de vue.

Citation:

---

C'est vrai pour le HTML strict et non transitional, or tintin72 n'affiche pas son doctype.

---

Je suis en xhtml1 strict ;)

Code:

---

1 2 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

---