CSS Спрайт показывает только конечное изображение


У меня есть лист спрайта, и я хочу отображать изображения рядом друг с другом, но код отображает только конечное изображение. Таким образом, этот код отображает только Изображение google, но он отображает его правильно (с помощью a: hover), но он не отображает изображения facebook или twitter.

Я знаю, что координаты верны, и если я комментирую google <li>, Когда я обновляю страницу, отображается только изображение facebook. Я не могу понять, что с ним не так, но мне интересно, имеет ли он какое-то отношение со свойством отображения?

EDIT: вот живой пример того, что происходит: http://jsfiddle.net/Duykb/

<div class="social"><h3>SHARE THIS PAGE</h3>
     <ul id="social">
         <li class="facebook">
             <a href="#" title="Facebook"></a></li>
         <li class="twitter">
             <a href="#" title="Twitter"></a></li>
         <li class="google">
             <a href="#" title="Google+"></a></li> 
    </ul>
 </div>

CSS:

h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px; }

#social {
margin-top: 10px;   
display: block;
position:relative;
padding-top: 30px; }        

#social li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0; }

#social li, #social a {
height:37px;
display:block; }


ul#social li.facebook a {
background: url('images/social_icons.png') no-repeat -5px -4px;
width: 37px;
height: 37px; }

ul#social li.facebook a:hover {
background: url('images/social_icons.png') no-repeat -5px -42px;
width: 37px;
height: 37px; }

ul#social li.twitter a {
background: url('images/social_icons.png') no-repeat -45px -4px;
width: 37px;
height: 37px; }

ul#social li.twitter a:hover {
background: url('images/social_icons.png') no-repeat -45px -42px;
width: 37px;
height: 37px; }

ul#social li.google a {
background: url('images/social_icons.png') no-repeat -82px -4px;
width: 37px;
height: 37px; }

ul#social li.google a:hover {
background: url('images/social_icons.png') no-repeat -82px -42px;
width: 37px;
height: 37px; }
2 2

2 ответа:

Http://jsfiddle.net/Duykb/1/

Удалены position: absolute и top: 0 из #social li, а затем добавлены...

#social li {
    float: left;
    width: 37px;
}
Затем внесите необходимые изменения в #social для правильного расположения на странице.

Я думаю, что все ваши <li> сидят друг на друге из-за их абсолютного расположения. Таким образом, Вы имеете дело с проблемой наслоения.

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

Правка:

Измените Правило #social li на...

    #social li {
    margin:0;
    padding:0;
    list-style:none;
    width: 37px;
    float:left;
}

Http://jsfiddle.net/Duykb/2/