Mon fond de bouton semble étiré

Question

J'ai un bouton comme fait pour que vous voyez here. Ça a l'air bien, non? Eh bien sur le site en direct, euroworker.no/shipping et /selectAddress il semble étiré.

Rend bien dans Chrome, IE et Safari, je pensais que cela aurait pu être un problème FF, mais chargé le violon dans FF et semble bien.

ref rapide CSS et HTML:

#fortsett_btn { 
    background-image: url(http://euroworker.no/public/upload/fortsett.png?1269434047); 
    background-repeat:no-repeat; 
    background-position:left; 
    background-color:none; 
    border:none; 
    outline:none; 
    visibility: visible; 
    position: relative; 
    z-index: 2; 
    width: 106px; 
    height: 25px; 
    cursor:pointer; 
}​ 

Et HTML

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button>​ 

Je me demande ce qui est avec elle.

Answer 1

Au lieu de

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">&nbsp;</button> 

Essayez ceci:

<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">Some value</button> 

puis ajouter text-indent:-999px; à votre CSS

Cela n'a rien à voir pourquoi votre bouton n'est pas affecté sur place en direct, sa suggestion juste . Vous ne stylisez probablement pas le bouton parce que vous manquez une feuille de style (mauvais lien), essayez de le styliser en ligne, puis copiez le style sur la feuille de style

Answer 2

Je ne suis pas sûr de comprendre le problème. Le CSS est différent dans chaque cas. Sur Fiddle, vous avez une seule image avec un background-repeat réglé sur no-repeat. Sur le site en direct, vous avez une tranche d'image différente avec background-repeat définie sur repeat-x. Ce sont deux façons différentes de styliser le bouton.

Fiddle:

#fortsett_btn { 
background-image:url("http://euroworker.no/public/upload/fortsett.png?1269434047"); 
background-position:left center; 
background-repeat:no-repeat; 
border:medium none; 
cursor:pointer; 
height:25px; 
position:relative; 
visibility:visible; 
width:106px; 
z-index:2; 
} 

en direct:

#product___specField_8 { 
-moz-border-radius:5px 0 0 5px; 
background-image:url("stylesheet/frontend/../../upload/orng_bg.png?1269434608"); 
background-repeat:repeat-x; 
border:1px solid #DDDDDD; 
float:left; 
font-size:24px; 
font-weight:bold; 
height:33px; 
padding-left:55px; 
width:124px; 
} 

Pourquoi ne pas vous attendre à voir quelque chose de différent?