28221 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

j'ai un petit problème d'affichage d'un textarea à l'intérieur d'un fieldset sur Internet Explorer.

Voilà l'aspet voulu (firefox) :
Edité par Raphaël : merci de créer des vignettes lorsque vous téléchargez des images. Sinon, les captures énormes posent des problèmes d'affichage du forum

j'ai donc un décalage vers la droite du textarea qui n'a pas lieu d'être ???

le code html :
<div id="ecrivez">
<h2>Ecrire un message</h2>
	<form id="ecrire" name="ecrire" action="?page=livredor&amp;action=envoie" method="post"  onsubmit="return controleFormulaire()">
		
		<label for="nom_l">Nom :
			<input type="text" name="nom_l" id="nom_l" /></label>
		<label for="mail">Mail :
			<input type="text" name="mail" id="mail" /></label>
		<label for="ville">Ville :
			<input type="text" name="ville" id="ville" /></label>

		<fieldset>
			<legend>Message :</legend>
			<a href="#" class="bouton" id="gras" onclick="balise('strong',document.ecrire.texte);" onmouseover="aide('Texte gras : <strong>texte</strong>');" onmouseout="aide('');"><span>gras</span></a>
		      <a href="#" class="bouton" id="italique" onclick="balise('em',document.ecrire.texte);" onmouseover="aide('Texte italique : <em>texte</em>');" onmouseout="aide('');"><span>italique</span></a>
		      <a href="#" class="bouton" id="souligne" onclick="balise('u',document.ecrire.texte);" onmouseover="aide('Texte souligné : <u>texte</u>');" onmouseout="aide('');"><span>soulign&eacute;</span></a>
		      <input name="help" type="text" id="help" /><br />
		      <textarea name="texte" cols="62" rows="5" id="texte"  onkeyup="modifApercu();"></textarea>

		</fieldset><br /> 
		<span id="label_apercu">Aperçu du message : </span> <div id="apercu"></div>
		<a href="#" onclick="envoyer();" id="bt_envoyer" class="bouton"><span>Envoyer</span></a>
	</form>
</div>


et la CSS :
#ecrivez label{
	margin: 5px;
	display: block;
	font-weight: bold;
}
#ecrivez label input{
	display: block;
}
#ecrivez fieldset{
	padding: 5px;
	margin: 5px 0;
	border: 2px solid #F5DEB8;
	width: 525px;
}
#ecrivez legend{
	font-weight: bold;
	margin: 0 0 15px;
}
#ecrivez textarea{
	margin: 5px;
	border: 1px solid #630;
}


euh... c'est grâve docteur ? Smiley biggrin
Modifié le 25 Jan 2005 - 09:43
ben si ça marche Smiley biggrin
(même si je fixe la taille à 100%)

merci !

c'est du à quoi ?
(le bebs qui veut tout comprendre)
Curieux : pas moyen de reproduire ce décalage à partir du code que tu as indiqué. Il doit nous manquer quelque-chose...

(Autre hypothèe : trop honteux d'être ainsi exposé à la vue de tous sur ce forum, le décalage se serait-il suicidé ?)

Cela dit, un petit problème annexe avec ce formulaire : tu y mélange les deux syntaxes possibles d'un label:
- label explicite : attribut for= et contrôle de formulaire placé à l'extérieur du label
- label implicite : pas d'attribut for= et contrôle placé à l'intérieur du formulaire.

Les labels implicites posent quelques problèmes avec certains lecteurs d'écran et sont déconseillés à ce titre. Le mélange des deux... n'a pas été testé à ma connaissance.