Broken CSS Sprites

Question

все. У меня есть некоторый странный глюк происходит с моим CSS спрайтов отображаются в следующем коде:

<footer> 
    <div id="social"> 
     <a href="#" target="_blank" class="socialicons twitter">Twitter</a> 
     <a href="#" target="_blank" class="socialicons linkedin">Linked In</a> 
     <a href="#" target="_blank" class="socialicons facebook">Facebook</a> 
     <a href="#" target="_blank" class="socialicons google">Google</a> 
     <a href="#" target="_blank" class="socialicons flickr">Flickr</a> 
     <span class="email">dan&#64;fifthgospelministries.com</span> 
     <span class="phone">717-395-1234</span> 
    </div> 
</footer> 

Он отлично работает, когда файл будет сохранен как файл HTML, но когда я преобразовать его в файл PHP образов сломаться.

это можно просмотреть на idealbrandon.com/new/index.php (broken) и idealbrandon.com/new/index.html (работает).

Редактировать Я забыл включить css. соответствующий CSS здесь:

footer{ 
    background: #323232; 
    padding: 3em; 
} 

#social{ 
    width:60%; 
    margin: 0 auto; 
    text-align:center; 
    width:250px; 
    height:135px; 
    padding-bottom:1em; 
} 

#social a{ 
    display:block; 
} 

.socialicons { 
    height: 50px; 
    width: 50px; 
    padding: 0; 
    margin: 0; 
    text-indent: -9999px; 
    float:left; 
} 

.twitter{ background: url('img/social.png') 0 0; } 
.linkedin{ background: url('img/social.png') 200 0; } 
.facebook{ background: url('img/social.png') 150 0; } 
.google{ background: url('img/social.png') 100 0; } 
.flickr{ background: url('img/social.png') 50 0; } 

.twitter:hover{ background: url('img/social.png') 0 50; } 
.linkedin:hover{ background: url('img/social.png') 200 50; } 
.facebook:hover{ background: url('img/social.png') 150 50; } 
.google:hover{ background: url('img/social.png') 100 50; } 
.flickr:hover{  background: url('img/social.png') 50 50; } 

.email{ 
    background-color:#8b8b8b; 
} 

.phone{ 
    background-color:#a6a6a6; 
} 

.email, .phone{ 
    font-weight: 400; 
    color:#fff; 
    display: block; 
    float: left; 
    width: 250px; 
    height: 50px; 
    text-align: center; 
    line-height: 3.2; 
} 

.email:hover, .phone:hover{ 
    color:#fff; 
    background-color:#9c1e20; 
} 

Любые мысли здесь?

Answer 1

В вашем CSS (style.css строки 306):

.linkedin{ background: url('img/social.png') 200 0; } 

должно быть:

.linkedin{ background: url('img/social.png') 200px 0; } 

Единицы измерения, как правило, требуется в CSS при ненулевым.