Différence entre FF et IE6

Bonjour,

J'ai une différence dans l'affichage d'une image selon le navigateur que j'utilise.

Avec Firefox et IE7, c'est ok, mais sous IE6, c'est différent.

Pour voir le problème, allez sur http://www.[enlevé par houbahop].net

Vous pouvez voir les zones textes pour se connecter en bas de la colone de gauche. J'ai tenté de skinner moi même ces boites en leur appliquant une image contenant une icone (le petit bonhomme et la clé).

Donc sous IE6, l'image se répète (alors que normalement elle est de la bonne taille).
Je précise que j'utilise un padding left dans le but de décaler le début de la zone de saisie pour ne pas que lorsque l'utilisateur entre son identifiant, les caractères s'affichent sur l'icone.

Mon champ semble rallongé de la longueur du padding ce qui provoque le répètement de l'image. Existe t'il un moyen autre que le padding pour faire cela ou une autre solution?

Voici le CSS, pouvez vous m'aider svp ?
Merci,
Houb.

EDIT HOUBAHOP: J'ai ajouté background-repeat: no-repeat; et l'image ne se répète plus, mais on voit que le champ est élargi par le padding; que faire pour lui rendre sa taille normale ?

/*Login Styles */
input#mod_login_username,
input#mod_login_password {
margin: 0;
margin-right: 5px;
color:#707070;
font-size:100%;
width: 182px;
padding:0;
padding-left:5px;
padding-top:3px;
padding-bottom:4px;

}

* html input#mod_login_username,
* html input#mod_login_password {
width: 175px;
}

input#mod_login_password {
margin-bottom: 4px;
padding-left: 19px;
width: 168px; /* pour pas que le champ soit trop long a cause du paddingleft de 19 qui fait décaler*/
background-image: url(../images/nouveau_loginbox_cle.gif);
background-repeat: no-repeat;
}

input#mod_login_username {
margin-bottom: 4px;
padding-left: 19px;
width: 168px; /* pour pas que le champ soit trop long a cause du paddingleft de 19 qui fait décaler*/
background-image: url(../images/nouveau_loginbox_user.gif);
background-repeat: no-repeat;
}

Modifié par houbahop (01 Feb 2007 - 23:15)