Discussion :

[Marco85]

Bonjour à tous,

J'ai un (petit) souci d'affichage d'un textarea sous IE alors que sous Firefox ça fonctionne très bien. Vous pouvez en voir la démonstration ici.

Je ne comprends pas trop d'où ça peut venir parce que je n'ai pas de marge appliquée dessus. Voici les codes xHTML et CSS :

Code xHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form method="post" id="mail_form" action="<?php echo basename(__FILE__);?>" onsubmit="return valider(this)">
	<p class="form_field">
		<label for="email">Adresse e-mail :</label>
		<input class="text" name="email" id="email" value="<?php echo $from?>" type="text" />
	</p>
	<p class="form_field">
		<label for="sujet">Sujet :</label>
		<input class="text" name="sujet" id="sujet" value="<?php echo $subject?>" type="text" />
	</p>
	<p class="form_field">
		<label for="message">Votre message :</label>
		<textarea name="message" id="message" rows="10" cols="80"><?php echo $message?></textarea>
	</p>
	<p>
		<input value="Envoyer" title="Envoyer" class="bouton" type="submit" />
	</p>
</form>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
label{
	cursor: pointer;
}
 
.form_field label{
	display: block;
}
 
input,textarea{
	border: 1px solid #999;
}
 
textarea{
	width: 100%;
	font-size: 1em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Merci d'avance,

Marco85

[blueice]

Quel est le problème sous IE ?
Une capture d'écran ne serait pas de trop...

[Marco85]

Très juste. Si je ne montre pas le problème, ça risque d'être difficile de m'aider ...
Alors voilà les deux copies d'écran, sous Firefox et sous Internet Explorer.

Merci

[Marco85]

Etonnant, ça disparait lorsque j'enlève la propriété width: 100%; de textarea.

Est-ce que quelqu'un a une idée de la raison pour laquelle IE agit comme ça ?

Merci d'avance,

Marco85

[Dan_A]

100% de quoi ? la largeur de textarea est fixée par cols -ce qui pose un problème si on réduit la taille de l'écran-.
Peut-être faut-il donc ajouter une largeur à #mail_form avant de mettre une largeur pour textarea?
Par ailleurs, il y de nombreux problèmes de hasLayout.
Il faut ajouter height:1%; dans #main et peut-être ailleurs.
Il faut retirer le prologue xml qui met ie6 en mode quirks.

[Marco85]

Un grand merci pour cette réponse pleine d'intérêt pour moi. Elle est vraiment pleine de bon sens.

100% de quoi ? la largeur de textarea est fixée par cols -ce qui pose un problème si on réduit la taille de l'écran-.
Peut-être faut-il donc ajouter une largeur à #mail_form avant de mettre une largeur pour textarea?

En fait, je n'ai pas fixé #mail_form car je veux qu'il prenne toute la largeur possible mais j'ai supprimé ce problème de colonne. Du coup, ça se redimensionne correctement.

Par ailleurs, il y de nombreux problèmes de hasLayout.

Pardonne cette question, mais que sont des problèmes de hasLayout ? Je ne comprends pas ce que c'est.

Il faut ajouter height:1%; dans #main et peut-être ailleurs.

J'ai suivi ton conseil car ils me paraissent tous judicieux. Ceci dit, je ne comprends pas quel est son intérêt et quelle est son action. Peux-tu me la décrire s'il te plait ?

Il faut retirer le prologue xml qui met ie6 en mode quirks.

Effectivement, j'avais lu ça quelque part mais j'ai laissé trainer et j'ai oublié. Désolé pour cette bête erreur.

Encore un grand merci. Cette une réponse très instructive. Je te serais gré de bien vouloir m'éclairer sur les autres points. Merci d'avance,

Marco85

[Marco85]

Aïe, je vais me faire taper sur les doigts. J'ai encore parlé trop vite.

Je suis obligé de mettre l'éléments cols dans le textarea. Donc, j'ai changé. Encore. J'ai l'ai mis 60 (comme ça, ça passe dans un écran de 800*600) et j'ai supprimer le width: 100%; de textarea qui ne servait à rien.

Voili voilà pour ce truc là.

Marco85

[Dan_A]

Je suis obligé de mettre l'éléments cols dans le textarea.

Bien sûr, c'est un attribut obligatoire.


Je pense qu'il faut fixer une largeur (90% par exemple pour #mail_form) afin de donner une référence à 100% pour textarea afin d'éviter les déplacements indésirables)
edit: mais ça ne sert sans doute effectivement à rien. Le comportement par défaut est préférable.


Pour hasLayout c'est une invention de microsoft. Des explications en anglais ici : http://www.satzansatz.de/cssd/onhavinglayout.html
Il existe sans doute une traduction, mais je ne sais pas où elle est.

[Marco85]

Merci beaucoup pour cette réponse. Elle est vraiment très intéressante. Je ne connaissais pas du tout cette invention de hasLayout. Merci pour cette information.

Marco85