28172 sujets

CSS et mise en forme, CSS3

Hello,

Je viens de passer plusieurs heures à chercher une solution à mon problème, sans résultat.
J'ai un formulaire avec deux champs de saisie et leurs labels respectifs :
<form action="pwet.php" method="post">
	<label for="pseudonyme">Pseudonyme :</label>
	<input type="text" name="pseudonyme" />
	<label for="mot-de-passe">Mot de passe :</label>
	<input type="password" name="mot_de_passe" />
</form>

Mon objectif est de n'avoir qu'un seul couple label/input sur une même ligne.
Le CSS ressemble donc à ça :
label
{
	float: left;
	clear: left;
}
input
{
	float: left;
}

Ca marche correctement sous Firefox mais pour Internet Explorer (6 et 7) seuls les labels s'affichent l'un en dessous de l'autre, les deux input restent sur la même ligne.
Est-ce qu'il existe une solution qui ne me m'oblige pas à rajouter des balises dans mon formulaire ?
Modifié par Julien Falque (13 Nov 2009 - 12:07)
Julien Falque a écrit :
Est-ce qu'il existe une solution qui ne me m'oblige pas à rajouter des balises dans mon formulaire ?
Pour rendre ton formulaire valide, il faudra de toute façon rajouter des balises... Les éléments input et label ne peuvent être les enfants direct de form, il doivent être contenu dans un div, p, table...

Le plus simple est donc de mettre chaque couple label input dans un <p>.

ps. : le for du label doit être lié à un id et non un name.
Ah, j'étais pas au courant. Bah comme ça c'est réglé Smiley smile
Merci pour ta réponse.

a écrit :
ps. : le for du label doit être lié à un id et non un name.

J'ai un peu trop simplifié le code de ma page quand j'ai copié-collé ^^

Par simple curiosité, est-ce qu'il existe quant même une solution CSS à ce problème, des fois que ça m'arrive hors d'un formulaire ?
Modifié par Julien Falque (13 Nov 2009 - 12:08)