[RESOLU] Bloqué sur la CSS d'un bouton sous Chrome

Bonsoir à toutes et tous,


j'en viens à demander votre aide, je bloque depuis plusieurs heures sur un ***** bouton

Voilà le site que je finalise de mettre en place : http://www.4bdistrib.com/

Sous Firefox et Internet Explorer, pas de souci d'affichage. Par contre sous Chrome, j'ai un souci avec le bouton du moteur de recherche en haut à gauche.

Habituellement j'arrive à résoudre les soucis d'affichage sous IE, mais Chrome je suis moins habitué et je le ressens durement ce soir !

J'imagine que vous irez voir par vous-même, mais voici tout de même le code :

HTML

<input id="search_button" class="button_mini" type="submit" value="">

CSS

form#searchbox input#search_button {
    background: url("http://www.4bdistrib.com/themes/default/img/template/search_bouton.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    height: 26px;
    margin-left: -34px;
    padding: 1px 4px;
    width: 25px;
}

Auriez-vous une idée ? Merci d'avance pour votre aide et votre temps !

Gregg
Modifié par DaTongue (30 Sep 2014 - 22:13)

Bonsoir,

Je me demande plutot comment sur IE çà marche, j'ai peut être raté qqch....

Personnellement je ferais :

p#ton_id{position:relative;}
input[type="button"]#ton_id{ position:absolute; top:0; right:0; }

Il te reste plus qu'a gérer l'espacement en haut et en bas à l'aide de top et right.

J'aurais également ajouter une valeur à ton input, et cacher le contenu avec text-indent à -9999px, font-size à 0 et line-height à 0.
Modifié par mini-truc (30 Sep 2014 - 17:33)

Royal !!! J'aime quand les réponses sont aussi concises qu'exactes !!!

Un grand merci mini-truc !!!