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 :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:
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>
OK sous FFOK sous IE
Code : Sélectionner tout - Visualiser dans une fenêtre à part #saisie .champFormulaireDroit {margin:0 0 0 200px; padding:0; width:190px; height:25px;}Sauriez-vous comment régler le problème?
Code : Sélectionner tout - Visualiser dans une fenêtre à part #saisie .champFormulaireDroit {margin:0; padding:0; width:190px; height:25px;}
Merci par avance.
Partager