Forum d'entraide PHPFrance

Bonjour,

Je poste un message afin de vous faire part d'un étrange problème que j'ai du mal à comprendre...
En effet j'ai réalisé un formulaire de login PHP/CSS et quelque chose de bizzare se produit sous internet explorer lorsque je désire insérer une balise IMG sous un champ :



Comme vous pouvez le constater l'image ne s'affiche pas ET C'EST NORMAL puis que je n'ai mis qu'une balise IMG vide pour les tests.
Le problème est qu'il y a un espace anormal entre le <label>code de sécurité</label> et le champ <input> en dessous. De plus, chose encore plus bizarre, il y a une duplication visuelle de doubles points ( : ). Je dis bien duplication visuelle car le doublon des doubles points ( : ) n'apparait pas lorsque je fais "afficher le code source de la page" dans un navigateur.

Et ça se produit uniquement quand je désire mettre une balise <IMG> !
ET uniquement sous IE et peut être safari (pas testé)

Voici le code source du formulaire :

<div id="member">
<form action="'.$_SERVER['PHP_SELF'].'" method="post">

<label>Identifiant:</label>
<input type="text" name="user" class="txtBox" />

<label>Mot de passe:</label>
<input type="password" name="password" class="txtBox" />

<label>Code de sécurité:</label>
<input type="text" name="captcha_code" class="txtBox" maxlength="4" />

<img src="test.jpg">

<input type="submit" name="go" value="" class="go" />
</form>

Voici le code source CSS où apparait le formulaire :

#member{
	width:486px;
	margin: 0px auto;
}
#member h2{
	display:block;
	background:url(../medias/images/member_login_bg.png) 0 0 no-repeat;
	width:466px;
	height:31px;
	padding:0 0 0 20px;
	font:bold 16px/31px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
}
#member form{
	float:left;
	width:191px;
	background:url(../medias/images/member_form_bg.gif) 0 0 repeat-x #353535;
	padding:9px 17px 24px 17px;
	color:#fff;
}
#member form label{
	font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:left; 
	display:block;
}
#member form input.txtBox{
	width:185px;
	height:19px;
	border-left:#808080 solid 1px;
	border-top:#808080 solid 1px;
	border-right:#D4D0C8 solid 1px;
	border-bottom:#D4D0C8 solid 1px;
	color:#000;
	background-color:#fff;
	margin:0;
	padding:0;
	float:left;
}
#member form a{
	background:url(../medias/images/icon-refresh.png) 0 0 no-repeat;
	padding:0 0 0 20px;
	font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#9CCC37;
	background-color:#353535;
	text-decoration:underline;
	float:left;
	margin:15px 0 0 0;
	width:120px;
}
#member form a:hover{
	text-decoration:none;
}
#member form input.go{
	background:url(../medias/images/btn_go.gif) 0 0 no-repeat;
	width:36px;
	height:15px;
	border:none;
	cursor:pointer;
	float:right;
	margin:15px 0 0 0;
}
#memberTxtContainer {
	float:left;
	width:225px;
	height:240px;
	background:url(../medias/images/member_form_bg.gif) 0 0 repeat-x #353535;
	padding:9px 17px 24px 17px;
	margin: 0 0 0 1px;
}
p.memberTxt {
	font:normal 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:justify;
	margin: 10px 0 0 0;
}
p.memberTxt a {
	color:#FFFFFF;
}
p.memberTxt a:hover {
	color:#D76E08;
}

Voici le code source CSS où apparait la balise IMG :

div, h1, h2, p, form, label, input, textarea, img, span{
	margin:0; 
	padding:0;
	border:0;
}

Voici le code source de ma page quand je fais "afficher le code source" dans le navigateur :

<form action="index.php" method="post">
<label>Identifiant:</label>
<input type="text" name="user" class="txtBox" />
<label>Mot de passe:</label>
<input type="password" name="password" class="txtBox" />
<label>Code de sécurité:</label>
<input type="text" name="captcha_code" class="txtBox" maxlength="4" />
<img src="test.jpg">
</form>

Que ce passe t'il ? Avez vous une idée ou un sentiment de déjà vu pour m'aider ?
Merci,

raph

Et sans les float, ça fait quoi?

salut,

apparemment internet explorer n'aime pas des images dans les formulaires.
J'ai résolu mon problème en créant un nouveau div en float left et en mettant mon image en dehors du formulaire.

Merci tout de même pour la réponse,
raph

C'est une solution comme une autre.
Par contre Internet Explorer n'a aucun problème avec les images dans les formulaires.
(pas les miens en tout cas)

Les floats eux, posent souvent de petits problèmes dans certaines circonstances...