Margin-left en pourcentage Pb IE7

**pmithrandir** · 12/12/2007, 16h05

Bonjour

Je veux mettre en page un formulaire avec a gauche des objets label qui contiennent quelques mots sur les "input" qui sont eux alignés plus a droite sur la page.

Ces INPUT doivent êtres à la fois sur la même ligne que leur label, et alignés avec les autres INPUT de façon a ce que ça soit joli.(et cohérent avec le reste du programme qui est fait surtout à base de tableau)

Pour l'instant, j'avais mis ce genre de code HTML :

Code :

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

1
2
3
4
5
<label>Adresse mail :</label>
<input id="login" class="FormClasse" type="text" value="pierre.bonneau" onchange="verifFormMail()" name="login"/>
<br/>
<label>Mot de passe :</label>
<input id="mdp" class="FormClasse" type="password" value="medipbo" onchange="verifFormMail()" name="mdp"/>

Avec ces attributs CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
label{
	position:absolute;
	margin-left:5%;
	margin-right:50%;
}
input.FormClasse{
	margin-left:50%;
	line-height:1.4em;
	margin-bottom:.2em;
	/*width:150px;*/
}

Sous Firefox, pas de problème a priori (sauf que pour rester sur la même ligne ça marche pas et ça se chevauche)
Sous IE, j'ai un comportement bizarre.

Lorsque je défini ma margin-left à 50%, elle se met à 50% du div quand le champ INPUT (ou SELECT) n'a pas de taille définie, mais à 50% de sa propre taille lorsque je définie le width.

Moralité, j'y comprend pas grand chose, donc je me demandais si vous aviez rencontré c genre de problème. Je suis bien sur ouvert à toute autre façon de faire pour atteindre mon résultat.

Merci
Pierre

PS : je précise que je ne peux utiliser la solution de la FAQ, ne sachant pas la taille que vont faire mes DIV(fenêtres re-dimensionnables MOOTOOLS)

**vlunder** · 13/12/2007, 04h54

Je comprends pas, pourquoi ne pas utiliser un tableau pour le formulaire aussi ?

**pmithrandir** · 13/12/2007, 09h07

Tout bêtement parce que les tableaux servent à afficher des données et non à faire de la présentation. Normalement on peut tout faire sans eux, mais il suffit de savoir comment...

**vlunder** · 13/12/2007, 12h57

Bien que ca peut marcher facilement avec un tableau même s'il s'agit d'un formulaire !!!

Voici ce que je te suggére de modifier sur ton css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
label{
	position:absolute;
	margin-left:20%;
	margin-right:50%;
}
input.FormClasse{
	margin-left:50%;
	line-height:1.4em;
	margin-bottom:.2em;
	/*width:150px;*/
}