CSS - Background position not working in Firefox

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

What is the effect you want to achieve? That might be a more productive question. — Alfie, Aug 25 '13 at 23:38
@Alfie The OP has all the social media icons in one image file, regularly spaced like a sprite. To view the icon of choice, simply shift the image by grid with (26px in this case). — Marc Audet, Aug 26 '13 at 01:52

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

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.

edited May 23 '17 at 10:27

Community

1
1

answered Aug 25 '13 at 23:33

Marc Audet

46,011
11
63
83

CSS - Background position not working in Firefox

1 Answers1