Retina-Sprite CSS not working

Question

I'm having problem with my sprite. My problem is I have a menu sprite, aswell as a retina menu sprite. But for some reason the Css for the retina sprite doesnt work. Here's my code:

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
   only screen and (min--moz-device-pixel-ratio: 2.0),
   only screen and (-o-min-device-pixel-ratio: 200/100),
   only screen and (min-device-pixel-ratio: 2.0) {
.menu li a,
   background-image:url('images/[e-mail]');
  -webkit-background-size: 110px 55px;
  -moz-background-size: 110px 55px;
   background-size: 110px 55px;
    }

Now here's the regular nav sprite:

.menu li a{background: url('images/sprite-nav.png') no-repeat;width: 100%;height: 100%;display:block;}
.menu li.services{width: 110px;height: 55px;}
.menu li.services a{background-position: 0px -300px;}
.menu li.services a:hover{background-position: 0px 0px;}

Btw, the menu has more than one image, (eg. I just add more menu li's and replace 'services' with the next menu item.)

Sorry I cant upload to jfiddle as I am not familiar with it. All answers appreciated!

Answer 1

OP,

You have an error in your media query syntax. The media query should wrap {} around the CSS definition. You were also a missing a { after .menu li a. Looks like you had a comma instead.

Here is the corrected version:

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
       only screen and (min--moz-device-pixel-ratio: 2.0),
       only screen and (-o-min-device-pixel-ratio: 200/100),
       only screen and (min-device-pixel-ratio: 2.0) {
           .menu li a {
              background-image:url('images/[e-mail]');
              -webkit-background-size: 110px 55px;
              -moz-background-size: 110px 55px;
              background-size: 110px 55px;
          }
      }