Fieldset sous IE7 [Résolu]

[Paniez]

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 :

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 :

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]

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

Code html :

<li class="moyenContactItem">

[Paniez]

Envoyé par Bisûnûrs

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

Code html :

<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]

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]

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 :

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]

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

[Paniez]

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