Fieldset sous IE7

**Paniez** · 01/09/2011, 10h31

Bonjour,

J'ai un petit bug sous IE 7 et le fieldset.

Pour le premier, le contour ne fait pas le tour et le second englobe juste l'image du captcha.

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<div class="formulaireContact"><li class="moyenContactItem"><span class="moyenFormTitre texte_fontsize_14">Par formulaire&nbsp;:&nbsp;</span>	<form name="formContact" id="formContact" action="./fr-contact-10-normal.html" method="post" onsubmit="return validateFormContact(this,alertChampNonEgaux,alertChampOblig,alertFormatMail,alertOnlyChiffre,alertNbCar);" enctype="multipart/form-data">
<div id="formCorps" class="formCorps">
		<input type="hidden" id="dirPoint" name="dirPoint" value="./">
		<input type="hidden" id="lang" name="lang" value="fr">
		<input type="hidden" id="modifFontSize" name="modifFontSize" value="10">
		<input type="hidden" id="stylecss" name="stylecss" value="normal">
<fieldset id="identification">
	<legend class="texte_fontsize_13">
		Vos coordonn&eacute;es				</legend>
 
	<li class="formItem"><label for="email" title="Veuillez saisir votre e&minus;mail" class="formLabel texte_fontsize_9 formObligatoire">* E&minus;mail :</label><input type="text" name="email" id="email" title="Veuillez saisir votre e&minus;mail" tabindex="1" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /><a href="#" class="aide" title="Votre adresse e&minus;mail ne sera pas utilis&eacute;e &agrave; des fins commerciales"><img src="./Images/Icones/aide.gif" alt="Votre adresse e&minus;mail ne sera pas utilis&eacute;e &agrave; des fins commerciales" /></a></li>
<li class="formItem"><label for="email2" title="Veuillez saisir votre e&minus;mail &agrave; nouveau" class="formLabel texte_fontsize_9 formObligatoire">* Confirmer votre e&minus;mail :</label><input type="text" name="email2" id="email2" title="Veuillez saisir votre e&minus;mail &agrave; nouveau" tabindex="2" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<li class="formItem"><label for="civilite" title="Veuillez s&eacute;lectionner votre civilit&eacute;" class="formLabel texte_fontsize_9">Civilit&eacute; :</label><select id="civilite" name="civilite" title="Veuillez s&eacute;lectionner votre civilit&eacute;" tabindex="3" onchange="changeSexe(this.value,'Homme','Femme')"><option value="MELLE">Melle</option><option value="MME">Mme</option><option value="MR">Mr</option></select>
</li>
<li class="formItem"><label for="nom" title="Veuillez saisir votre nom" class="formLabel texte_fontsize_9">Nom :</label><input type="text" name="nom" id="nom" title="Veuillez saisir votre nom" tabindex="4" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
 
<li class="formItem"><label for="prenom" title="Veuillez saisir votre pr&eacute;nom" class="formLabel texte_fontsize_9">Pr&eacute;nom :</label><input type="text" name="prenom" id="prenom" title="Veuillez saisir votre pr&eacute;nom" tabindex="5" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<li class="formItem"><label for="adresse" title="Veuillez saisir votre adresse" class="formLabel texte_fontsize_9">Adresse :</label><textarea name="adresse" id="adresse" title="Veuillez saisir votre adresse" tabindex="6" cols="20" rows="3" value="" onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></li>
<li class="formItem"><label for="tel_fixe" title="TO_SAISIR_TEL" class="formLabel texte_fontsize_9">TEL :</label><input type="text" name="tel_fixe" id="tel_fixe" title="TO_SAISIR_TEL" tabindex="7" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<li class="formItem"><label for="CP" title="Veuillez saisir votre code postal" class="formLabel texte_fontsize_9">Code&nbsp;Postal :</label><input type="text" name="CP" id="CP" title="Veuillez saisir votre code postal" tabindex="8" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<li class="formItem"><label for="ville" title="Veuillez saisir votre ville" class="formLabel texte_fontsize_9">Ville :</label><input type="text" name="ville" id="ville" title="Veuillez saisir votre ville" tabindex="9" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<hr/><li class="formItem"><label for="objet" title="Objet" class="formLabel texte_fontsize_9">Objet :</label><input type="text" name="objet" id="objet" title="Objet" tabindex="11" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
<li style="height:85px;" class="formItem"><label for="message" title="Votre message" class="formLabel texte_fontsize_9">Votre message :</label><textarea name="message" id="message" title="Votre message" tabindex="11" cols="20" rows="3" value="" onfocus="this.className='focus';" onblur="this.className='normal';"></textarea></li>
</fieldset>
			<fieldset>
				<legend class="texte_fontsize_13">
					S&eacute;curit&eacute;				</legend>
 
					<div class="centrer">
						<img src="./captcha.php" alt="Captcha" id="captcha" name="captcha"/>
						<a onclick="document.images.captcha.src='./captcha.php?id='+Math.round(Math.random(0)*1000)+1"><img src="./Images/Icones/reload.png" title="Changer l'image" alt="Changer l'image"/></a>
					</div>
				<li class="formItem"><label for="userCode" title="Non&minus;sensible &agrave; la casse (pas de distinction entre majuscule et minuscule)" class="formLabel texte_fontsize_9 formObligatoire">* Entrer le code ci&minus;dessus :</label><input type="text" name="userCode" id="userCode" title="Non&minus;sensible &agrave; la casse (pas de distinction entre majuscule et minuscule)" tabindex="16" size="21" value="" onfocus="this.className='focus';" onblur="this.className='normal';" /></li>
			</fieldset>
			<em class="texte_fontsize_12">
				* Champs obligatoires			</em><br/>
 
		</div>
		<div id="formPied" class="formPied">
			<input type="submit" name="valid" id="valid" value="Envoyer" title="Cliquer pour envoyer" tabindex="17" />
		</div>
	</form>
	</li>
</div>

et le CSS :

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
.formCorps
{
	list-style-type:none;
	text-align:left;
}
.moyenFormTitre
{
	margin: 10px 0px 2px 0px;
	display:block;
	color:#008066;
}
.formCorps
{
	margin: 25px 0px 5px 0px;
}
.formCorps fieldset
{
	border-color:#dddddd;
	color:#4b4b4b;
}
.formCorps fieldset>legend
{
	color:#8b8b8b;
}
.formItem
{
list-style-type:none;
}
.formItem>label
{
	vertical-align:top;
	display:inline-block;
	width:50%;
}
.formItem>input,.formItem>select,.formItem>textarea
{
	width:40%;
}
.formItem>.bouton
{
	width:auto;
}
.formObligatoire,.formCorps em
{
	margin: 2px 0px 2px 0px;
	font-weight:bold;
	color:#B80047;
}

Avez-vous une idée ?

**Bisûnûrs** · 01/09/2011, 11h21

Tu as un li bizarre qui traine tout seul, juste après ton premier div :

Code html :

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

<li class="moyenContactItem">

**Paniez** · 01/09/2011, 15h37

Envoyé par Bisûnûrs

Tu as un li bizarre qui traine tout seul, juste après ton premier div :

Code html :

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

<li class="moyenContactItem">

Re,

La balise fermante est à la fin (pas la dernière, mais l'avant dernière). Il correspond à une énumération des moyens de contacter où, ce formulaire de contact, est l'un des moyens (les autres sont l'adresse, le téléphone, ...).

**Bisûnûrs** · 01/09/2011, 15h40

Envoyé par Paniez

La balise fermante est à la fin

Oui, j'avais vu la balise fermante.

Envoyé par Paniez

Il correspond à une énumération des moyens de contacter où, ce formulaire de contact, est l'un des moyens (les autres sont l'adresse, le téléphone, ...).

Il n'empêche que le li n'a pas sa place ici. Il doit être directement enfant d'un ul.

**Paniez** · 01/09/2011, 17h41

Envoyé par Bisûnûrs

Il n'empêche que le li n'a pas sa place ici. Il doit être directement enfant d'un ul.

Re,

J'ai bien un ul au début, suivant le schéma :

Code :

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

1
2
3
4
5
6
7
8
 
Les moyens de nous contacter :
<ul>
<li>Adresse</li>
<li>Telephone</li>
...
<li>Formulaire</li>
</ul>

Il y a des div entre le </li> et le </ul>, ça pose problème ?

**Bisûnûrs** · 01/09/2011, 17h46

Oui. Le seul élément autorisé à être enfant direct de ul c'est li.

**Paniez** · 01/09/2011, 17h53

Envoyé par Bisûnûrs

Oui. Le seul élément autorisé à être enfant direct de ul c'est li.

Re,

Alors, merci car je n'ai plus de soucis en respectant à la lettre le coup :
<ul>
+--<li>...</li>
...
</ul>

J'ai été un peu trop souple sur ce plan là.

Merci encore

Fieldset sous IE7

CSS

Discussions similaires

Partager

Partager