CSS Sprites not working properly on Firefox - css

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;
}

Answer 2

#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;
}