Проблемы с кнопкой «Отправить»

Question

Я использую некоторые CSS-стили для моих кнопок отправки, и они выглядят хорошо, за исключением того, что в Firefox есть пробел между левым и основным изображением. Вот что я использую:

button.buttons {

background: none;
background-image: url(images/button_left_sprite.png);
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 17px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}

button:hover.buttons {border: none; }
button.buttons span {
background-image: url(images/button_sprite.png);
padding: 9px 20px 10px 5px;
font: 12px 'Droid Sans',arial,sans-serif;
}

/* Green Button */
button.btn_green {background-position: 0 569px;color: #435425;}
button.btn_green:hover {color: #435425!important;}
button.btn_green span { background-position: 100%  569px;}
button:hover.btn_green { background-position: 0 528px;background-color:transparent!important; }
button:hover.btn_green span { background-position: 100% 528px;background-color:transparent!important; }​

И поставить его на странице:

<button type="submit" class="buttons btn_green left"><span class="left">Update</span></button>​

Если это поможет, изображения здесь:

Я собираюсь помешаться, пытаясь убрать это уродливое пространство в Firefox! Может кто-нибудь помочь мне понять, почему он это делает?

Answer 1

Firefox имеет некоторые отклонения, когда дело доходит до заполнения кнопок / ввода. Я не уверен, почему это так, и почему проблема остается, несмотря на публичное документирование. В любом случае, посмотрите что-то вроде normalize.css и посмотрите раздел в формах - например, это одно исправление, которое они применяют для Firefox:

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

То, что ваш левый спрайт зависит от 17px левого отступа на кнопках., Если FF добавляет пару пикселей по умолчанию, это может испортить выравнивание ваших изображений. Еще одна вещь, которую вы можете попробовать - уменьшить количество левого отступа и посмотреть, совпадают ли изображения.

Это помогает?

Answer 2

Только для меня кнопка выглядит полностью запутанной в Firefox?не просто пробел между изображениями.

Выглядит для меня лучше так: http://jsfiddle.net/78eSc/1/

button.buttons {
    background: none;
    background-image: url('http://i41.tinypic.com/dv1b6.png');
    display: block;
    border: none;
    margin: 0 10px 10px 0;
    padding: 0 0 0 14px;
    cursor: pointer;
    font-weight:normal!important;
    color: #111111;
}
button.buttons span {
    display:block;
    background-image: url('http://i41.tinypic.com/2mcds8j.png');
    padding: 9px 20px 10px 5px;
    margin:-1px 0 0 0;
    font: 12px 'Droid Sans',arial,sans-serif;
}

Answer 3

1-ая вещь .. почему вы используете такие большие изображения?

http://i41.tinypic.com/2mcds8j.png

упрощенный ...

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=repeat-x

или лучше попробуйте сделать все это без изображений,

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius

пример, как это сделать;)

http://www.css3.info/preview/rounded-border/