[IE/FF] différence de positionnement dans un formulaire

**franculo_caoulene** · 30/01/2008, 11h42

Salut,

J'ai le code suivant valide xhtml1.0 strict et css qui me pose problème dans sa mise en forme sous IE et FF :

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
103
<?xml version="1.0" encoding="UTF-8"?>
<!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="fr" lang="fr">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>test html</title>
	<style type="text/css">
		#form0 {margin:0; padding:0; width:420px;}
		#form0 .libelleFormulaireDroit {margin:0; padding:10px 0 10px 10px;}
		#choixDroit {padding:0 0 10px 10px;}
		#saisie .libelleFormulaireDroit {margin:0; padding:0 0 0 10px; width:190px; height:25px; float:left;}
		#saisie .champFormulaireDroit {margin:0 0 0 200px; padding:0; width:190px; height:25px;}
		#saisie .libelleCourt {margin:0; padding:5px 0 0 10px; display:block; float:left; clear:left; width:120px; height:25px;}
		#saisie p {margin:10px 0 0 0;}
		#saisie ul {margin:5px 0 0 0; padding:0;}
		#saisie li {margin:0; padding:5px; float:left;}
		#saisie textarea {margin:4px 0 0 0; width:268px; height:50px;}
		#formulaireRetour {margin:10px 0 0 10px; color:#ff0000; font-weight:bold;}
		#majDroit {margin:10px 0 0 0; float:right;}
	</style>
</head>
<body>
	<div id="droitModeleSet" class="conteneur">
		<h1 class="titrepage">Gestion des droits</h1>
		<form id="form0" method="post" action="DroitEntiteSet.asp">
		<div class="arrondi">
			<h2>ajouter/modifier un droit</h2>
			<div class="bloc1">
				<p class="libelleFormulaireDroit">
					<label for="iActionAjouter">Ajouter un droit :</label><input type="radio" id="iActionAjouter" name="iAction" value="ajouter"/>
					<label for="iActionModifier">Modifier un droit :</label><input type="radio" id="iActionModifier" name="iAction" value="modifier" />
				</p>
				<p id="choixDroit">
					<label for="sChoixDroit">Choisir le droit :</label>
					<select id="sChoixDroit" name="sChoixDroit">
					<option value=""></option>
					</select>
				</p>
			</div>
		</div>
		<div class="arrondi" id="saisie">
			<div class="bloc1">
				<p class="libelleFormulaireDroit"><label id="labeliIdDroit" for="iIdDroit">ID droit :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iIdDroit" name="iIdDroit" /></p>
				<p class="libelleFormulaireDroit">Actif :</p>
				<p class="champFormulaireDroit">
					<label for="iActifTrue">oui</label><input type="radio" id="iActifTrue" name="iActif" value="1" />
					<label for="iActifFalse">non</label><input type="radio" id="iActifFalse" name="iActif" value="0" />
				</p>
				<p class="libelleFormulaireDroit"><label for="iFamille">Famille :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iFamille" name="iFamille" /></p>
				<div id="iFamilleAutoComplete" class="autocomplete"></div>
				<p class="libelleFormulaireDroit"><label for="iSousFamille">Sous famille :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iSousFamille" name="iSousFamille" /></p>
				<div id="iSousFamilleAutoComplete" class="autocomplete"></div>
				<p class="libelleFormulaireDroit">Expert :</p>
				<p class="champFormulaireDroit">
					<label for="iExpertTrue">oui</label><input type="radio" id="iExpertTrue" name="iExpert" value="1" />
					<label for="iExpertFalse">non</label><input type="radio" id="iExpertFalse" name="iExpert" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Droit par défaut :</p>
				<p class="champFormulaireDroit">
					<label for="iDefautTrue">oui</label><input type="radio" id="iDefautTrue" name="iDefaut" value="1" />
					<label for="iDefautFalse">non</label><input type="radio" id="iDefautFalse" name="iDefaut" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Filtre sur les statuts :</p>
				<p class="champFormulaireDroit">
					<label for="iFiltreStatutTrue">oui</label><input type="radio" id="iFiltreStatutTrue" name="iFiltreStatut" value="1" />
					<label for="iFiltreStatutFalse">non</label><input type="radio" id="iFiltreStatutFalse" name="iFiltreStatut" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Droit primaire :</p>
				<p class="champFormulaireDroit">
					<label for="iDroitPrimaireTrue">oui</label><input type="radio" id="iDroitPrimaireTrue" name="iDroitPrimaire" value="1" />
					<label for="iDroitPrimaireFalse">non</label><input type="radio" id="iDroitPrimaireFalse" name="iDroitPrimaire" value="0" />
				</p>
				<p class="libelleFormulaireDroit"><label for="sDroitPrimaire">Si droit secondaire, choisir un droit parent :</label></p>
				<p class="champFormulaireDroit">
					<select id="sDroitPrimaire" name="sDroitPrimaire">
					<option></option>
					</select>
				</p>
				<p class="libelleCourt"><label>Profils :</label></p>
				<ul style="list-style-type:none;">
					<li style="background-color:#b60016;"><input type="checkbox" id="iPoidsa" name="iPoids" value="a" /></li>
					<li style="background-color:#002451;"><input type="checkbox" id="iPoidsc" name="iPoids" value="c" /></li>
					<li style="background-color:#195d00;"><input type="checkbox" id="iPoidsd" name="iPoids" value="d" /></li>
					<li style="background-color:#440000;"><input type="checkbox" id="iPoidse" name="iPoids" value="e" /></li>
					<li style="background-color:#f0c300;"><input type="checkbox" id="iPoidsb" name="iPoids" value="b" /></li>
					<li style="background-color:#19005d;"><input type="checkbox" id="iPoidsf" name="iPoids" value="f" /></li>
					<li style="background-color:#5ab400;"><input type="checkbox" id="iPoidsi" name="iPoids" value="i" /></li>
					<li style="background-color:#f99aff;"><input type="checkbox" id="iPoidsh" name="iPoids" value="h" /></li>
					<li style="background-color:#974300;"><input type="checkbox" id="iPoidsg" name="iPoids" value="g" /></li>
				</ul>
				<p class="libelleCourt"><label for="tDetail">Détail :</label></p>
				<textarea id="tDetail" name="tDetail" cols="30" rows="2"></textarea>
				<button id="majDroit" type="button">Valider</button>
				<p id="formulaireRetour"></p>
			</div>
		</div>
		</form>
	</div>
</body>
</html>

Mon problème se situe précisément dans le positionnement des champs texte. le code ci-dessus rend bien sous FF mais sous IE les marges font que les champs texte sont loin vers la droite. Si je corrige en mettant une marge à 0, cela rend bien sous IE mais les libellés chevauchent les champs de saisie sous FF, voir le code suivant:
OK sous FF

Code :

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

#saisie .champFormulaireDroit {margin:0 0 0 200px; padding:0; width:190px; height:25px;}

OK sous IE

Code :

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

#saisie .champFormulaireDroit {margin:0; padding:0; width:190px; height:25px;}

Sauriez-vous comment régler le problème?

Merci par avance.

**Bisûnûrs** · 30/01/2008, 14h41

Je ne sais pas exactement le pourquoi du comment, mais tu peux résoudre ça en mettant un float:left et un margin:0 sur ton champFormulaireDroit.

**franculo_caoulene** · 30/01/2008, 15h27

Ah ben oui j'aurais dû penser dans l'autre sens! Je le fais juste en dessous pour les cases à cocher.
Par contre, j'ai justement la case rouge qui vient se coller après la liste déroulante sous IE. Curieux étant donné que je spécifie toutes les marges. J'ai donc ajouté un clear:right; à la classe des champs mais ça ne fait rien.

Code :

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

#saisie .champFormulaireDroit {margin:0; padding:0; width:190px; height:25px; float:left; clear:right;}

**Bisûnûrs** · 30/01/2008, 15h33

Rajoute une largeur à ton ul (270px il me semble).

**franculo_caoulene** · 30/01/2008, 15h38

Bon en fait, c'est un simple problème de marge et un clear:left inutile.

**franculo_caoulene** · 30/01/2008, 16h40

Finalement, j'ai lassié le clear:left pour le libellé court. Voici le résultat final de la mise en forme d'un formulaire

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
<?xml version="1.0" encoding="UTF-8"?>
<!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="fr" lang="fr">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>test html</title>
	<style type="text/css">
		#form0 {margin:0; padding:0; width:420px;}
		#form0 .libelleFormulaireDroit {margin:0; padding:10px 0 10px 10px;}
		#choixDroit {padding:0 0 10px 10px;}
		#saisie .libelleFormulaireDroit {margin:0; padding:0 0 0 10px; float:left; width:190px; height:30px;}
		#saisie .libelleCourt {margin:0; padding:5px 0 0 10px; float:left; clear:left; width:120px; height:30px;}
		#saisie .champFormulaireDroit {margin:0; padding:0; float:left; width:210px; height:30px;}
		#saisie ul {margin:0; padding:0;}
		#saisie li {margin:0; padding:5px; float:left;}
		#saisie textarea {margin:4px 0 0 0; width:268px; height:50px;}
		#formulaireRetour {margin:10px 0 0 10px; color:#ff0000; font-weight:bold;}
		#majDroit {margin:10px 0 0 0; float:right;}
	</style>
</head>
<body>
	<div id="droitModeleSet" class="conteneur">
		<h1 class="titrepage">Gestion des droits</h1>
		<form id="form0" method="post" action="DroitEntiteSet.asp">
		<div class="arrondi">
			<h2>ajouter/modifier un droit</h2>
			<div class="bloc1">
				<p class="libelleFormulaireDroit">
					<label for="iActionAjouter">Ajouter un droit :</label><input type="radio" id="iActionAjouter" name="iAction" value="ajouter"/>
					<label for="iActionModifier">Modifier un droit :</label><input type="radio" id="iActionModifier" name="iAction" value="modifier" />
				</p>
				<p id="choixDroit">
					<label for="sChoixDroit">Choisir le droit :</label>
					<select id="sChoixDroit" name="sChoixDroit">
					<option value=""></option>
					</select>
				</p>
			</div>
		</div>
		<div class="arrondi" id="saisie">
			<div class="bloc1">
				<p class="libelleFormulaireDroit"><label id="labeliIdDroit" for="iIdDroit">ID droit :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iIdDroit" name="iIdDroit" /></p>
				<p class="libelleFormulaireDroit">Actif :</p>
				<p class="champFormulaireDroit">
					<label for="iActifTrue">oui</label><input type="radio" id="iActifTrue" name="iActif" value="1" />
					<label for="iActifFalse">non</label><input type="radio" id="iActifFalse" name="iActif" value="0" />
				</p>
				<p class="libelleFormulaireDroit"><label for="iFamille">Famille :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iFamille" name="iFamille" /></p>
				<div id="iFamilleAutoComplete" class="autocomplete"></div>
				<p class="libelleFormulaireDroit"><label for="iSousFamille">Sous famille :</label></p>
				<p class="champFormulaireDroit"><input type="text" id="iSousFamille" name="iSousFamille" /></p>
				<div id="iSousFamilleAutoComplete" class="autocomplete"></div>
				<p class="libelleFormulaireDroit">Expert :</p>
				<p class="champFormulaireDroit">
					<label for="iExpertTrue">oui</label><input type="radio" id="iExpertTrue" name="iExpert" value="1" />
					<label for="iExpertFalse">non</label><input type="radio" id="iExpertFalse" name="iExpert" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Droit par défaut :</p>
				<p class="champFormulaireDroit">
					<label for="iDefautTrue">oui</label><input type="radio" id="iDefautTrue" name="iDefaut" value="1" />
					<label for="iDefautFalse">non</label><input type="radio" id="iDefautFalse" name="iDefaut" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Filtre sur les statuts :</p>
				<p class="champFormulaireDroit">
					<label for="iFiltreStatutTrue">oui</label><input type="radio" id="iFiltreStatutTrue" name="iFiltreStatut" value="1" />
					<label for="iFiltreStatutFalse">non</label><input type="radio" id="iFiltreStatutFalse" name="iFiltreStatut" value="0" />
				</p>
				<p class="libelleFormulaireDroit">Droit primaire :</p>
				<p class="champFormulaireDroit">
					<label for="iDroitPrimaireTrue">oui</label><input type="radio" id="iDroitPrimaireTrue" name="iDroitPrimaire" value="1" />
					<label for="iDroitPrimaireFalse">non</label><input type="radio" id="iDroitPrimaireFalse" name="iDroitPrimaire" value="0" />
				</p>
				<p class="libelleFormulaireDroit"><label for="sDroitPrimaire">Si droit secondaire, choisir un droit parent :</label></p>
				<p class="champFormulaireDroit">
					<select id="sDroitPrimaire" name="sDroitPrimaire">
					<option></option>
					</select>
				</p>
				<p class="libelleCourt"><label>Profils :</label></p>
				<ul style="list-style-type:none;">
					<li style="background-color:#b60016;"><input type="checkbox" id="iPoidsa" name="iPoids" value="a" /></li>
					<li style="background-color:#002451;"><input type="checkbox" id="iPoidsc" name="iPoids" value="c" /></li>
					<li style="background-color:#195d00;"><input type="checkbox" id="iPoidsd" name="iPoids" value="d" /></li>
					<li style="background-color:#440000;"><input type="checkbox" id="iPoidse" name="iPoids" value="e" /></li>
					<li style="background-color:#f0c300;"><input type="checkbox" id="iPoidsb" name="iPoids" value="b" /></li>
					<li style="background-color:#19005d;"><input type="checkbox" id="iPoidsf" name="iPoids" value="f" /></li>
					<li style="background-color:#5ab400;"><input type="checkbox" id="iPoidsi" name="iPoids" value="i" /></li>
					<li style="background-color:#f99aff;"><input type="checkbox" id="iPoidsh" name="iPoids" value="h" /></li>
					<li style="background-color:#974300;"><input type="checkbox" id="iPoidsg" name="iPoids" value="g" /></li>
				</ul>
				<p class="libelleCourt"><label for="tDetail">Détail :</label></p>
				<textarea id="tDetail" name="tDetail" cols="30" rows="2"></textarea>
				<button id="majDroit" type="button">Valider</button>
				<p id="formulaireRetour"></p>
			</div>
		</div>
		</form>
	</div>
</body>
</html>

[IE/FF] différence de positionnement dans un formulaire

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager