28172 sujets

CSS et mise en forme, CSS3

Formulaire et Firefox, comportement curieux

Bonjour à tous,

J'ai trouvé un comportement curieux sous Firefox lors de la création d'un grand formulaire complexe qui m'a obligé à le placer dans un tableau. J'ai réussis à reproduire le problème sur une page simple. Voici les codes:

le HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Blabla</title>
		<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		<form id="monform" action="onsenfout.php" method="post">
			<table>
				<tr>
					<td class="col1">Revenus brut</td>
					<td class="col2">
						<p>
							Salaire:
							<span class="retrait"><input type="text" name="salaire" id="salaire" value="1500" /> &euro;
							<input type="radio" name="f_1_revenu_salaire_type" id="f_1_revenu_salaire_type0" value="M" checked="checked" /> Mois
							<input type="radio" name="f_1_revenu_salaire_type" id="f_1_revenu_salaire_type1" value="A" /> An</span>
						</p>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


et le CSS:

input[type="text"], select, textarea {
	border:1px solid #666666;
	font-family:arial,sans-serif;
	font-size:11px;
	padding:2px;
	width:244px;
}

#monform p{
	padding-bottom:4px;
	padding-top:2px;
	position:relative;
}

span.retrait{
	left:60px;
	position:absolute;
	top:0px;
}

#salaire{width: 50px;}

td.col1{
	width: 150px;
}

td.col2{
	width: 300px;
}


Avec ce code, le contenu du champ "salaire" est invisible. Si l'on clique dedans le curseur n'apparaît pas mais si on commence à taper une lettre là le contenu apparaît miraculeusement.

En réalisant des tests je me suis rendu compte que si je supprimais le CSS du <span>, je n'avais pas le problème. Egalement si je laisse le CSS du <span> mais que je place le code hors d'un tableau ça fonctionne aussi. J'avoue être perplexe devant ce comportement. Quelqu'un aurait-il une explication et éventuellement une parade à cela ??

Merci d'avance
Modifié par Cool Coyote (05 Apr 2008 - 18:27)
Salut Cool Coyote Smiley cligne ,

en général quand un champ de saisie n'est pas accessible c'est qu'un autre élément est positionné par dessus... bien que dans ce cas je ne vois pas bien lequel Smiley rolleyes ?

Par contre, quelle drôle d'idée de positionner ton span en absolute alors qu'un relative aurait très bien fait l'affaire (et corrigé le problème) et qu'il aurait laissé l'élément dans le flux.

A+
Salut,

en fait ce n'est même pas que le champ n'est pas accessible, c'est que le contenu est invisible tant que je ne tape pas du texte dedans. C'est vraiment bizarre...

En ce qui concerne la position: absolute; c'est un peu sorti de son contexte dans ce code, mais cette technique permet d'agencer proprement un formulaire complet sans avoir recours à un tableau, notamment pour l'alignement des éléments. J'ai trouvé cette technique dans un bouquin et je la trouve assez élégante et assez adaptée aux formulaires Smiley cligne . Bon évidemment ici j'en ai quand même utilisé un, car il était particulièrement complexe (80 champs sur 2 colonnes avec des agencements particuliers etc..)

Bon, si quelqu'un a une autre idée, je suis preneur Smiley smile
Sujet clos
Aller à