Padding bizarre sur un champs input

Bonjour à tous,

J'utilise une classe "btn" appliquée à un champs "input", avec un padding 1px 2px, et IE(...) m'affiche un énooooooorme padding qui n'a rien à voir.

J'ai bien placé au début du CSS

* {padding:0;}

donc je ne comprends rien.

Voici l'extrait concerné :

.btn {
	margin:20px auto;
}

.btn, .btn a {
	background-color:#FAE9B6;
	cursor:pointer;
	text-decoration:none;
	color:#781F01;
	padding:1px 2px;
	font-size:1.2em;
	border:1px solid black;
}

Je vous précise aussi que cette classe appliquée à autre chose qu'input ne pose pas de problème.

Merci de votre réponse.

Salut

Tu n'aurais pas un exemple en ligne ? Ou à tout le moins le code html, on ne sait rien faire avec le CSS seul

Je ne peux pas vous donner d'accès (site avec accès réservé), mais les codes concernés sont :

<input name="valider" type="submit" class="btn centre" value="valider" />
<br />
<h3><strong>Ou choisissez une photo au hasard </strong><span><a href="famille.php" class="btn"> Choisir </a></span></h3>

Le reste de la page n'a pas d'interêt concernant ce problème.

Le bouton est un peu plus grand dans IE que dans Firefox, mais de là à dire que le padding d'IE est énorme, c'est un peu exagéré

J'arrive à me rapprocher de ce que Firefox propose avec

    input.btn {
        padding: 0;
        line-height: 1.2em;
        display: inline-block;
        height: 1.4em;
        width: 3.6em;
}

réservé à IE par les commentaires conditionnels.

[RESOLU]Merci de ta réponse, sopo, en effet ça fonctionne pas mal. La logique me parait un peu tordue, mais bon. Vivement IE7, qu'on rigole.

J'ai juste ajouté

input.btn {

	position:relative;

	top:-1px;
}

pour l'alignement vertical (j'ai un menu déroulant juste à gauche.

Merci beaucoup.