Home/ Questions/Q 7443071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:16:27+00:00

I’m trying to set up a sprite menu but it’s always showing first slide

  • 0

I’m trying to set up a sprite menu but it’s always showing first slide of srpite, in all links. This is my CSS:

#menu-social{float: right; width: 175px; margin-top: 5px; list-style-type: none;}
#menu-social li{display: inline-block; margin-right: 8px;}
#menu-social li a{display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#link-google-plus{width: 30px; background-position: 0 0;}
#link-twitter{width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/}
#link-facebook{width: 21px; background-position:  0 -51px;}
#link-tuenti{width: 21px; background-position:  0 -72px;}

But it always shows Google+ icon, which is the first one in the sprite.

What am I missing?

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re having what I call a selector score issue.. Since your first rule #menu-social li a uses an ID + element + element, it overload the following rules #link-facebook, with only the ID.

    In other words:

    • For each ID value, apply 100 points
    • For each class value (or pseudo-class or attribute selector), apply 10 points
    • For each element reference, apply 1 point

    Give a try on this snippet:

    #menu-social { float: right; width: 175px; margin-top: 5px; list-style-type: none;}
#menu-social li { display: inline-block; margin-right: 8px;}
#menu-social li a { display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#menu-social li a#link-google-plus { width: 30px; background-position: 0 0; }
#menu-social li a#link-twitter { width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/ }
#menu-social li a#link-facebook { width: 21px; background-position:  0 -51px; }
#menu-social li a#link-tuent { width: 21px; background-position:  0 -72px; }

    A simple/elegant solution would be to change the IDs to classes (you don’t need that much IDs), like this:

    #menu-social li a { display: block; height: 18px; background: url(images/spr_sociales.png) transparent no-repeat;}

#menu-social li a.link-google-plus { width: 30px; background-position: 0 0; }
#menu-social li a.link-twitter { width: 21px; background-position-x: -30px; /*or background-position:  0 -30px;*/ }
#menu-social li a.link-facebook { width: 21px; background-position:  0 -51px; }
#menu-social li a.link-tuent { width: 21px; background-position:  0 -72px; }

    More links on this issue here:

    1. http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
    2. http://css-tricks.com/specifics-on-css-specificity/
    3. http://www.htmldog.com/guides/cssadvanced/specificity/
    • 0