IE ajoute un padding 1px / background-image sur submit. Pourquoi ?

Hello,

Je deviens fou grâce à IE comme d'habitude mais cette fois

Je souhaite ajouter un background-image sur un bouton submit. Jusque là aucun souci. Mais je souhaite aussi ajouter des bordures afin de profiter au maximum des bénéfices des css. Et voila que IE (6 et 7, pas testé sous le 8) m'ajoute un padding de 1px entre mon background et mes bordures css.

Voici le code

<form action="#" method="post" id="form-login">
    <fieldset>
        <legend>Connexion</legend>
        <fieldset>
            <p>
                <label for="login-mail">Email: </label>
                <input id="login-mail" name="login-mail" value="E-mail" type="text"  />
            </p>
            <p id="remember-me">
                <input type="checkbox" id="login-remember" name="login-remember" />
                <label for="login-remember">Remember me</label>
            </p>
        </fieldset>
        <fieldset>
            <p>
                <label for="login-pwd">Mot de passe: </label>
                <input id="login-pwd" name="login-pwd" value="Mot de passe" type="password" />
            </p>
            <p id="login-forgot"><a href="#">Forgot you password ?</a></p>
        </fieldset>
        <input class="btn-ok" name="validate" title="Enter your email and password and press this button" type="button" value="OK" />
    </fieldset>
</form>

Et le code CSS simplifié

* {
margin:0;
padding: 0;
}
input.btn-ok{
  background:yellow url(../../../images/ui/common/form/background-btn.gif) 0 0 repeat-x;
  border-left:1px solid green;
  border-right:1px solid green;
  border-top:1px solid green;
  border-bottom:1px solid green;
  padding:0;
}

Sous IE, j'ai mon contour vert, un joli contour jaune (donc le background que j'ai appliqué) et ensuite mon image.
Première fois que je vois ça. J'ai cherché sur google, j'ai l'impression d'être le seul lol. J'espère que la communauté alsacreations pourra m'aider

merci
julien

Bonjour,

HS: pourquoi un value="E-mail" sur ton input alors qu'il y a un label tout à fait correct?

Mmh j'ai pas de solution mais quelques pistes:
- rajoute voir au sélecteur de l'input un peu de poids (form et fieldset par exemple)
- le texte ... réduit line-height et font-size pour tester?

[b]form fieldset[/b] input.btn-ok{
line-height: 1; /* c'est pour tester hein */
font-size: 10px; /* bis */
}

Modifié par Felipe (09 Jul 2009 - 20:48)

@Felipe : merci de te jeter le premier sur ce casse-tête

Pour le HS, le client souhaite que le champs soit pré-rempli car une fois la CSS appliquée, les labels sont masqués et l'internaute ne voit le type de champs (email ou password) que via la valeur par défaut. Celle-ci sera mise à 0 en javascript (portail social avec un peu de Javascript par ci par là ). Pas très accessible mais je conçois toujours le html quand même en me disant, si la CSS change un jour

Sinon la solution que tu me proposes ne marche malheureusement pas. Toujours ce padding de 1px qui reste accroché.

J'ai essayé

#form-login fieldset input#toto{}

en ayant rajouté un id sur mon input type button. Toujours le même souci.
Modifié par CUT HERE (09 Jul 2009 - 20:59)

Bonjour,

J'ai fait quelques recherches et je n'ai pas trouvé la solution à ton problème. Le padding est ajouté par IE, sans doute pour aider l'utilisateur à bien distinguer le bouton qui permet de soumettre le formulaire. Je suis tombé sur quelques articles ou sujets avec des hacks, mais ceux-ci ne semblent pas du tout fonctionner.

Pourrais-tu nous montrer le résultat que tu souhaites obtenir, il y a peut-être d'autres solutions que input type submit personnalisé. Je pense notamment aux solutions suivantes :

- <input> de type image
- <button>
- Une balise autour du bouton submit qui sert à mettre le background-image, et le bouton submit sans background.

En général, j'optes souvent pour l'input de type image.

Bon courage!

@Tony Monast : une des contraintes qui explique l'utilisation ainsi au niveau html.
Le site est international et on souhaite minimiser autant que possible les localisations des images. Qui dit traductions, dit différentes tailles de bloc. La DA a donné ce style de boutons




Comme vous le voyez, il y a un fond facilement répétable sur la largeur. Mais le contour ne l'est pas.
Si j'utilisais des images, j'aurais un problème car je devrais le faire pour chaque taille (et oui je peux avoir des find plus petits ou plus grand selon le module en question).
Donc cette solution est à écarter. Sinon choix radical à expliquer au client (sic), pas de bordure sous IE mais ça change tout de même un peu la DA sous IE (c'est très pointu et exigeant sur la qualité de l'intégration).
Modifié par CUT HERE (09 Jul 2009 - 21:15)

Parfois, poster aide à trouver la solution (pas parfaite mais si quelqu'un trouve, je prends volontiers) mais voici un compromis acceptable (j'espère pour le client).

Les bordures des cotés ont des couleurs différentes mais dans des nuances très légères. j'ai donc pris la couleur des bords gauche et droit pour l'appliquer en background. J'ai supprimé les bordures et ajouté un padding de 1px ce qui permet de donner une impression de contour mais de couleur unie.

Si la DA avait eu des contours plus prononcés, cette solution n'aurait pu marcher et je pense qu'un jour ça arrivera forcément à quelqu'un

Sinon ya la solution de pas de bordure pour IE 6-7, tant pis.

Autre HS qui va bien: un input de type button et pas de type submit? Le formulaire ne peut donc être soumis que par un utilisateur ayant JS activé?
Modifié par Florent V. (09 Jul 2009 - 23:29)