[résolu] Hauteur de <input> avec et sans doctype

pat665

25 Sep 2006 à 14:23

Bonjour,

J'ai un problème pour définir la hauteur d'un élément INPUT. Avec le code suivant, j'obtiens le résultat voulu - une hauteur de 19 pixels.


<html>
	<body>
		<input style="height:19px;">
	</body>
</html>

Quand je rajoute un DOCTYPE, l'élément est beaucoup plus haut.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
		<input style="height: 19px;">
	</body>
</html>

Comment obtenir la même hauteur en gardant le DOCTYPE ?
Modifié par pat665 (02 Oct 2006 - 11:01)

noklio

25 Sep 2006 à 22:49

Je ne connais pas bien l'html4, mais sans doiute parce qu'il y a des attributs définis par rapport au doctype (auquel cas j'ai appris quelquechose aujourd'hui Smiley smile

)

Tu devrai essayer de redefinir tout ce qui est suceptible de changer la hauteur de ton input

<input style="height: 19px; padding:0; margin:0; font-size:12px;">

Jai mis 12px parce que ca correspond à peu près à 19px de hauteur. Réduis d'avantage sinon Smiley smile

Modifié par noklio (25 Sep 2006 - 22:49)

pat665

2 Oct 2006 à 11:01

Salut,

Alors la solution était simple. L'élément <input> est défini par défaut avec un border de 2px et un padding de 1px.

Sans DOCTYPE, on passe en mode Quirk et on applique le vieux modèle de boîte, où border et padding sont comptés dans la hauteur. La hauteur du texte est donc de 13px car 2px+1px+13px+1px+2px = 19px.

Avec DOCTYPE, border et padding s'ajoutent.
2px+1px+19px+1px+2px = 25px

CSS et mise en forme, CSS3

[résolu] Hauteur de <input> avec et sans doctype