Labels pas en face des inputs dans FireFox

**tintin72** · 21/03/2008, 09h55

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 :

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

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

**Erwan31** · 21/03/2008, 11h48

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 :

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

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.

**franculo_caoulene** · 21/03/2008, 16h56

Salut,

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.

**Erwan31** · 21/03/2008, 18h15

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.

**tintin72** · 22/03/2008, 17h24

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

Je suis en xhtml1 strict

Code :

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

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

**pop_up** · 21/03/2008, 11h50

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

Code :

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

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

ça fonctionne

Sinon, essai ça :

Code :

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

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

**tintin72** · 21/03/2008, 12h39

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 :

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

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.

**Neroptik** · 21/03/2008, 15h22

La bonne syntaxe serai

Code :

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

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

me semble il

**SebastienM** · 21/03/2008, 15h46

La bonne syntaxe serait plutôt :

Code :

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

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

**Erwan31** · 21/03/2008, 16h09

Envoyé par SebastienM

La bonne syntaxe serait plutôt :

Code :

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

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

Exact

Labels pas en face des inputs dans FireFox

CSS

Vue hybride

Discussions similaires

Partager

Partager