You are using a non-standard CSS property that works in Chrome but not Firefox.
See: Is background-position-x (background-position-y) a standard W3C CSS property?
However, standard background properties will take care of the issue.
Question
I have this site here: http://seasonsrestaurant.ca/
and In Firefox my social media icons are all the twitter icon. This is my CSS. How come background position is not working?
ul.social-media li.twitter{
background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Solution
You are using a non-standard CSS property that works in Chrome but not Firefox.
See: Is background-position-x (background-position-y) a standard W3C CSS property?
However, standard background properties will take care of the issue.