Décalage d'<input> à cause d'un float:left

Bonjour à tous, j'ai un petit problème de CSS...
Premièrement, voici le code XHTML et CSS :

[...]
		<p class="form_insc">
			<label title="Entrez votre nom de famille ici" class="champ_oblig">Votre nom : <input type="text" name="nom" size="25" /></label><br />
			<label title="Entrez votre pr&eacute;nom ici" class="champ_oblig">Votre pr&eacute;nom : <input type="text" name="prenom" size="25" /></label><br />
			<label title="Entrez votre adresse e-mail ici" class="champ_oblig">Votre adresse e-mail : <input type="text" name="email" size="35" /></label><br />
			<label title="Entrez votre date de naissance ici" class="champ_oblig">Votre date de naissance :</label> 
			<span id="date_naiss">
				<select name="jour" title="S&eacute;lectionnez votre jour de naissance">
					<option value="00" selected="selected">&nbsp;</option>
					<option>01</option>
					<option>02</option>
					<option>...</option>

				</select>
				<select name="mois" id="mois" title="S&eacute;lectionnez votre mois de naissance">
					<option value="00" selected="selected">&nbsp;</option>
					<option value="01">Janvier</option>
					<option value="02">F&eacute;vrier</option>
					<option value="03">...</option>
				</select>
				<input type="text" name="annee" size="4" title="Entrez votre ann&eacute;e de naissance ici" />
			</span>
		</p>
[...]

[...]
.form_insc {
	text-indent:0px !important;
	line-height:30px;
	text-align:left !important;
	width:500px;
	margin:auto;
}

.form_insc input {
	float:right;
}

#date_naiss {
	float:right;
}
#date_naiss input {
	float:none;
}
[...]

Et mon problème, c'est que sous FireFox et IE, les <input> sont décalés vers le bas par rapport au texte (et pas sous Opera).
Voici un screenshot du phénomène :


Est-ce que quelqu'un pourrait m'indiquer la solution à mon problème svp ? Merci beaucoup d'avance

Pour le coup, c'est effectivement Opera qui adopte le comportement conforme aux spécifications CSS. Firefox et Internet Explorer font passer à la ligne l'élément flottant avant de le placer à droite dans le conteneur, même si l'élément flottant est un élément de type en-ligne.

Il n'y a pas de correctif. C'est l'implémentation de float qui est fautive.

Solution possible : faire flotter les labels à gauche, en se basant sur un code HTML de ce type :

<p><label for="form-item1">Bla bla :</label> <input id="form-item1" name="form-item1" /></p>
<p><label for="form-item2">Bla bla :</label> <input id="form-item2" name="form-item2" /></p>

Bonjour,

Accessoirement, le code :

<label title="Entrez votre nom de famille ici" class="champ_oblig">Votre nom : <input type="text" name="nom" size="25" /></label>

est de toute façon à revoir pour l'accessibilité (ne pas utiliser de label implicites, mais des labels explicites comme dans l'exemple de Florent ci-dessus).

Merci beaucoup, je vais tester ça

Et merci pour l'info de l'accessibilité, justement j'essaie tant que possible de rendre mes sites accessibles.

Bonne journée à vous.

Bon, j'ai corrigé mon code... Maintenant ça fonctionne sous Firefox et Opera mais sous IE les <label> sont décalés bizzarement, en sorte de cascade

[...]
<p class="form_insc">
			<label for="nom" title="Entrez votre nom de famille ici" class="champ_oblig">Votre nom :</label> <input type="text" name="nom" size="25" title="Entrez votre nom de famille ici" /><br />
			<label for="prenom" title="Entrez votre pr&eacute;nom ici" class="champ_oblig">Votre pr&eacute;nom :</label> <input type="text" name="prenom" size="25" title="Entrez votre pr&eacute;nom ici" /><br />
			<label for="email" title="Entrez votre adresse e-mail ici" class="champ_oblig">Votre adresse e-mail :</label> <input type="text" name="email" size="35" title="Entrez votre adresse e-mail ici" /><br />
			<label title="Entrez votre date de naissance ici" class="champ_oblig">Votre date de naissance :</label> 
				<select name="jour" title="S&eacute;lectionnez votre jour de naissance">
					<option value="00" selected="selected">&nbsp;</option>
					<option>01</option>
					<option>02</option>
					<option>...</option>
				</select>
				<select name="mois" id="mois" title="S&eacute;lectionnez votre mois de naissance">
					<option value="00" selected="selected">&nbsp;</option>
					<option value="01">Janvier</option>
					<option value="02">F&eacute;vrier</option>
					<option value="03">...</option>
				</select>
				<input type="text" name="annee" size="4" title="Entrez votre ann&eacute;e de naissance ici" />
		</p>
[...]

[...]
.form_insc {
	text-indent:0px !important;
	line-height:30px;
	text-align:right !important;
	width:500px;
	margin:auto;
}

.form_insc label {
	float:left;
}
[...]

Voilà le screenshot :


Merci d'avance.

Personne ?

Y a-t-il une raison particulière pour placer tous ces labels+input dans un seul paragraphe ?

La construction que je proposais (un paragraphe = un label + un input) me semble plus intéressante pour gérer correctement les styles.

Attention au positionnement flottant, pas toujours facile à gérer, surtout si on se retrouve avec des problèmes de dépassement de flottants.
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Il pourra être nécessaire d'utiliser la propriété clear sur les paragraphes, ou peut-être tout simplement d'utiliser un contexte de formatage pour éviter le dépassement des flottants (avec un overflow: hidden par exemple).