Discussion :

[F-eeks]

Bonjour !

Mon code imbrique un div au milieu d'un formulaire. Cela pose problème problème sous IE (pas Firefox...): les input à l'intérieur ne sont pas centrés (ils sont décalés vers la droite).

Si j'inverse et que c'est le formulaire qui est dans le div, pas de soucis. Mais pour des raisons de programmation php je dois absolument garder la première solution.

Voici le xhtml:

Code html :

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
 
<div id="content">
<!-- ... blabla ... -->
<div class="framedcontent">
<!-- ... textes ... -->
<form action="book.php" method="get">
<!-- ... autres input sans soucis ... -->
</div>
<br />
<h3>Identification :</h3>
<div class="framedcontent">
<b>Votre e-mail :</b><br />
<input type="text" name="email" value="" /><br />
<br />
<b>Votre mot de passe: </b><br />
<input type="password" name="pass" value="" /><br />
</div>
<input type="submit" value="Valider" />
</form>
<!-- ... blabla ... -->
</div>

Et le css correspondant:

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
 
body {
    font-family: "Trebuchet Ms", Verdana, Arial, sans-serif;
    font-size: 0.8em;
    margin: 20px;
    padding: 0;
    text-align: center;
}
 
/* ... */
 
#content form {
    display: inline;
}
 
#content input, #content select {
    background: #c1cee7;
    border: 1px solid #345185;
    color: #345185;
    margin: 2px;
}
 
#content {
    position: relative;
    width: 750px;
    margin: 0 auto 1px;
    border: 2px solid #345185;
    background-color: white;
    padding: 0;
}
 
.framedcontent {
    width: 95%;
    text-align: center;
    padding: 5px;
        border: 1px solid black;
}
 
/* ... */

J'aimerais savoir comment faire pour que les input ne soient pas décalés sous IE, tout en gardant mon imbrication de form et de div.

Merci de votre aide !

[cedsun]

Il y a une mauvaise imbrication de ton 1er div "framedcontent".

Tout le formulaire doit être dans le 1er.

[siplusplus]

Tu devrais mettre l'option class dans les balises <form>, <input>, ...
au lieu de spécifier une balise <div> uniquement pour le style.
Cela augmenterais grandement la compatibilité des navigateurs.