CSS Sprites not working properly on Firefox

Question

I added CSS Sprites for Social Media icons on my website but it is not working properly on Firefox where as the view is accurate on Safari and Chrome.

CSS:

#social-icons {
   margin: 4px auto 0;
   padding: 0 0 15px;
   border-bottom: 1px dotted #222;
   text-align: right;
   font-size: .9em;
   float: right;
   width: 80%;
}

#social-icons .facebook {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 289px;
   background-position-y: 0px;
}

#social-icons .twitter {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 193px;
   background-position-y: -32px;
   margin-left: 10px;
}

#social-icons .youtube {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position-x: 386px;
   background-position-y: -161px;
   margin-left: 10px;
}

HTML

<div id="social-icons">
   <div class="youtube"></div>
   <div class="twitter"></div>
   <div class="facebook"></div>
</div>

On Firefox it is only showing Facebook`s icon repeatedly. What could be the problem?

Answer 1

Firefox does not support the background-position-y and background-position-x CSS properties. It was pulled from the spec at some point, as it was a carryover from an IE implementation.

Use the standard background-position: x y; property instead and this will work:

#social-icons .facebook {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 289px 0px;
}
#social-icons .twitter {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 193px -32px;
   margin-left: 10px;
}
#social-icons .youtube {
   width: 30px;
   height: 30px;
   background: url(../img/social_media_icons.png);
   float: right;
   background-position: 386px -161px;
   margin-left: 10px;
}