Problème de padding sur un input text (IE 8)

Bonjour,

voilà on m'a demandé de mettre une marge intérieur aux champs de texte, pour ne pas que le texte soit collé aux bordure (gauche, droite...)
Dans mon cas, la bordure est une image en background.

Sur Firefox tout se passe bien, mais sur IE 8, quand je rentre un texte plus long que le champ (c'est pour un champ de recherche), celui-ci déborde sur la gauche, et du coup sur l'image de fond (mais pas non plus en dehors de l'input, faut pas exagérer )

Pour tester avec IE 8, pas plus simple : vous prenez le formulaire du forum Alsacreations "Créer un nouveau sujet" (en mode déconnecté) et vous remplissez le champ "Mot de passe" avec plein de caractères.

Comme c'est un champ de recherche, je peux pas trop limiter le nombre de caractères pour éviter le débordement.

Connaissez-vous une solution à ce problème ? Ou est-ce que c'est une propriété d'IE qui est là pour montrer qu'on a du texte "à gauche".

Mon code CSS :
#searchform input#s {
background : url(images/champs-recherche.png) no-repeat;
margin: 10px 0 0 3px;
padding: 0 4px 0 8px;
padding: 7px 4px 0 8px\9; /* hack IE */
color: #fff;
width: 132px;
border: none;
height:31px;
margin-left: 3px;
margin-top: 10px;
font-size:14px;
float: left;
}
[code]
Modifié par hash (29 Mar 2010 - 15:43)