My button background seems stretched.

Question

Hi, I have a button as made for you to see here. Looks fine,right? Well on the live site, euroworker.no/shipping and /selectAddress it seems stretched.

Renders fine in Chrome, IE and Safari, I thought it might have been a FF issue, but loaded the fiddle into FF and seems fine.

Quick ref CSS and 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;
}​

And HTML

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

I wonder what's up with it.

Answer 1

Instead of

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

Try this :

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

then add text-indent:-999px; to your CSS

This has nothing to do why your button is unaffected on live site, its just suggestion. You button doesn't style probably because you're missing a style sheet(wrong link), try styling it inline, then if it works copy the style to the style sheet

Answer 2

I'm not sure I understand the problem. The CSS is different in each case. On Fiddle you have a single image with a background-repeat set to no-repeat. On the live site you have a slice of a different image with background-repeat set to repeat-x. Those are two different ways of styling the button.

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;
}

Live:

#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;
}

Why wouldn't you expect to see something different?