CSS Спрайт

[job3507]

Всем доброго времени суток.

Столкнулся вот с такой проблемой, то ли я туплю, то ли делаю что-то не так с css спрайтом.

Есть вот такой кусок html кода:

<div id="social-button">                        <a href="#" id="social-button1"></a>                        <a href="#" id="social-button2"></a>                        <a href="#" id="social-button3"></a>                        <a href="#" id="social-button4"></a>                    </div>

И так же кусок css:

#social-button {    width: 162px;    height: 32px;    float: right;    margin-right: 30px;    margin-top: 65px;}#social-button1 {    width: 33px;    height: 33px;    background: url(img/social-buttom.png), 0 0;    margin-right: 10px;    display: block;    float: left;}#social-button2 {    width: 33px;    height: 33px;    background: url(img/social-buttom.png), 37 0;    margin-right: 10px;    display: block;    float: left;}#social-button3 {    width: 33px;    height: 33px;    background: url(img/social-buttom.png), 74 0;    margin-right: 10px;    display: block;    float: left;}#social-button4 {    width: 33px;    height: 33px;    background-image: url(img/social-buttom.png) 111 0;    display: block;    float: left;}

Сам спрайт: 

в итоге получаю вот такой результат:

 

Где я накосячил? Или как исправить ошибку?

Заранее спасибо за ответы!

[mrnobody]

px поставьте всем значениям, кроме нулевых значений.

 

ААА так вы еще и запятые поставили в background-image вставляется картинку и задаете ей позицию в 4 кнопке.

 

 

http://jsfiddle.net/mrnobody/7rdqptyr/1/

Edited November 9, 2014 by mrnobody

[job3507]

px поставьте всем значениям, кроме нулевых значений.

 

ААА так вы еще и запятые поставили в background-image вставляется картинку и задаете ей позицию в 4 кнопке.

 

 

http://jsfiddle.net/mrnobody/7rdqptyr/1/

Спасибо за ответ, но к сожалению это не сильно помогло исправить ситуацию (стало выводить везде первый элемент спрайта). И все же вы натолкнули меня на нужную мысль, пришлось дописывать background-position и присваивать отрицательные значения (по оси x).

[npofopr]

Вы посмотрите, как правильно использовать background лучше.

http://htmlbook.ru/css/background

http://htmlbook.ru/css/background-image