fieldset qui fait tout peter sous IE

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

Bonjour,

J'ai un formulaire qui passe tres bien sous firefox mais pas sous IE (testé sous IE6 mais sous IE7 je pense que c'est pareil)

J'ai essayé de reproduire ma mise en page pour que vous constatiez le bug avec le code :

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
 
<!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">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style>
	#conteneur {
		float: left;
		width: 100%;
		display: inline;                                                            /* evite le double margin bug d ie */
		margin-left: -12em;
	}
	.col1 {
		width: 12em;
		float: left;
		margin-left: 12em;                                                          /* permet de ramener la colonne de gauche de l ecran */
		display: inline;
	}
 
	.contenu {
    	margin-left: 24em;                                                          /* marge negative du conteneur + la largueur de la colonne de gauche */
		background-color: skyblue;
	}
 
	.col3 {
		padding-left: 100%;                                                         /* sort le div de l ecran */
    	margin-left: -12em;                                                         /* le ramene de sa largeur dans l ecran */
	}
	</style>
<body>
<div id="conteneur">
	<div class="col1">
	youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />
	</div>
 
	<div class="contenu">
		<form name="postuler" id="postuler" action="postuler.php?id=AGAF+BSN+ou+AG" method="post" enctype="multipart/form-data">
		   <fieldset>
				<label for="champ1">champ1 :</label><br />
				<input type="text" value="" name="champ1" id="champ1" />
				<br />
				<br />
				<label for="champ2">champ2 :</label><br />
				<input type="text" value="" name="champ2" id="champ2" />
				<br />
				<br />
				<label for="champ3">champ3 :</label><br />
				<input type="text" value="" name="champ3" id="champ3" />
				<br />
				<br />
				<label for="question1">question blabla?</label><br />
				<textarea name="question1" id="question1" cols="70" rows="10"></textarea>
				<br />
				<br />
				<label for="bla">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label><br />
				<input type="file" id="bla" name="bla" />
				<br />
 
				<br />
				<div class="centre"><button type="submit">Envoi</button></div>
			</fieldset>
		</form>
	</div>
</div>
<div class="col3">
youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />
</div>
</body>
</html>

Firefox: OK
IE6 : KO
IE 6 sans fieldset: OK

des idées ?

merci

**Erwan31** · 21/03/2008, 12h08

Salut,
dans ces cas là penses toujours au haslayout qui résout bien des problèmes.
L'élément form nécessite dans certain cas d'avoir le haslayout ou position:relative pour que ce qu'il englobe se comporte normalement.

Ceci dit les élément br devraient être éviter ici, ils ne sont pas à leur place (dans un paragraphe de texte).
Attribues dans ces cas là un display:block à tes labels et englobe le couple label/input dans un p auquel tu donnes des marge verticales

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
           	<p>
				<label for="champ1">champ1 :</label>
				<input type="text" value="" name="champ1" id="champ1" />
                </p>
                <p>
				<label for="champ2">champ2 :</label>
				<input type="text" value="" name="champ2" id="champ2" />
                </p>
                <p>
				<label for="champ3">champ3 :</label>
				<input type="text" value="" name="champ3" id="champ3" />
                </p>

**pop_up** · 21/03/2008, 12h30

Ok j'ai corrigé tout ça.

Par contre j'ai un autre petit problème concernant la mise en forme des input.
J'ai fait ceci :

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
 
<!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">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style>
	#conteneur {
		float: left;
		width: 100%;
		display: inline;                                                            /* evite le double margin bug d ie */
		margin-left: -12em;
	}
	.col1 {
		width: 12em;
		float: left;
		margin-left: 12em;                                                          /* permet de ramener la colonne de gauche de l ecran */
		display: inline;
	}
 
	.contenu {
    	margin-left: 24em;                                                          /* marge negative du conteneur + la largueur de la colonne de gauche */
		background-color: skyblue;
	}
 
	.contenu input {
    border: 0.1em solid #1C555F;
    margin: 0em;
    padding: 0em;
	height: 1.3em;
}
 
	.col3 {
		padding-left: 100%;                                                         /* sort le div de l ecran */
    	margin-left: -12em;                                                         /* le ramene de sa largeur dans l ecran */
	}
	</style>
<body>
<div id="conteneur">
	<div class="col1">
	youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />
	</div>
 
	<div class="contenu">
		<form name="postuler" id="postuler" action="postuler.php?id=AGAF+BSN+ou+AG" method="post" enctype="multipart/form-data">
		   <fieldset>
				<p>
					<label for="champ1">champ1 :</label><br />
					<input type="text" value="" name="champ1" id="champ1" />
				</p>
				<p>
					<label for="champ2">champ2 :</label><br />
					<input type="text" value="" name="champ2" id="champ2" />
				</p>
				<p>
					<label for="champ3">champ3 :</label><br />
					<input type="text" value="" name="champ3" id="champ3" />
				</p>
				<p>
					<label for="question1">question blabla?</label><br />
					<textarea name="question1" id="question1" cols="70" rows="10"></textarea>
				</p>
				<p>
					<label for="bla">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</label><br />
					<input type="file" id="bla" name="bla" />
				</p>
				<div class="centre"><button type="submit">Envoi</button></div>
			</fieldset>
		</form>
	</div>
</div>
<div class="col3">
youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />youpi<br />
</div>
</body>
</html>

Mais l'input type="file" réagi bizarrement sous Firefox
J'utiliserai bien les selecteurs du type input[type=file] mais est ce que ça marchera avec tous les navigateurs ?

**SebastienM** · 21/03/2008, 14h40

Hello !

Mou aussi je rencontre ce problème

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

T'as pas assez cherché... Tu as un height: 1.3em au niveau
de ta classe .contenu input

**pop_up** · 21/03/2008, 16h21

je sais bien mais justement il m'est utile pour les input normal.

j'aimerai que le input type="file" s'affiche de la meme manière que les inputs normaux ce qui n'est pas le cas sous firefox car ça le rogne et je ne voit pas pourquoi.

Le line-height est utile car si tu l'enleve, les input des champs1, 2 et 3 sont trop compressés

**franculo_caoulene** · 21/03/2008, 17h14

La FAQ?

**pop_up** · 21/03/2008, 20h26

Merci pour le lien mais je ne voit toujours pas pourquoi le height ne s'applique pas a l'input type="file". Je vais pas utiliser de javascript pour le mettre en forme car il faut que ça reste accessible.

Le truc c'est que j'aimerai avoir un rendu uniforme pour ce formulaire car la, la taille des textarea convient mais j'aimerai mettre la meme pour les champs input et je n'arrive pas à avoir un rendu correct sur IE et Firefox

**Erwan31** · 21/03/2008, 20h31

Envoyé par pop_up

Merci pour le lien mais je ne voit toujours pas pourquoi le height ne s'applique pas a l'input type="file".

EDIT: tu dois mettre un height supérieur sur ton input file c'est tout

**pop_up** · 21/03/2008, 20h42

Ok bon ben en fait y a meme pas de solution pour faire un truc propre.

Ben tant pis, on fera sans comme disent la plupart des gens qui ont voulu personnaliser cet input type file.

merci à vous

fieldset qui fait tout peter sous IE

CSS

Discussions similaires

Partager

Partager