Мои кнопки фона кажутся растянутыми

Question

У меня есть кнопка, которая была сделана для вас, чтобы увидеть here. Выглядит хорошо, правда? Хорошо на живом сайте, euroworker.no/shipping и /selectAddress кажется растянутым.

Одевается в Chrome, IE и Safari, я думал, что это может быть проблема FF, но загрузил скрипку в FF и кажется прекрасным.

Быстрый исх CSS и 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; 
}​ 

И HTML

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

Интересно, что с ней.

Answer 1

Вместо

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

Попробуйте это:

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

затем добавить text-indent:-999px; в свой CSS

Это не имеет ничего общего, почему ваша кнопка не влияет на живой сайт, его просто внушение , Вы не используете стиль, потому что вам не хватает таблицы стилей (неправильная ссылка), попробуйте стилизовать его в строке, а затем, если он работает, скопируйте стиль в таблицу стилей

Answer 2

Я не уверен, что понимаю проблему. В каждом случае CSS отличается. На Fiddle у вас есть одно изображение с фоном-повтором, установленным на no-repeat. На живом сайте у вас есть фрагмент другого изображения с фоном-повтором, установленным на repeat-x. Это два разных способа стилизации кнопки.

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

Почему вы не ожидали бы увидеть что-то другое?