#EANF#

#EANF#

I am trying to achieve a simple rollover using image sprite. Unfortunately
i am having trouble in setting the image in the center.
the a class should be a 26px width and 21px in height. but facebook holder
should have 10px padding. It would be great if someone can look at my
codes?
HTML
<div class="holder">
<div class="facebook-holder">
<a class="ss facebook"
href="https://www.facebook.com/bendaggersdotcom" target="_blank"></a>
</div>
</div>
CSS
.holder{background:#a8a1a2; height: 50px; width:150px; padding:10px;}
.ss {display:block;height:21px;width:26px;background:
url(http://www.bendaggers.com/wp-content/uploads/2013/08/socials.png);margin-left:24px;float:left;
}
.facebook-holder { background:#FFF; max-width:46px; max-height:41px;
height:100%;vertical-align:baseline; text-align:center;}
.facebook-holder:hover {background:#3b5998;}
.facebook {width:26px;background-position: 0px center; background-repeat:
no-repeat; margin:0px; padding:10px;}
.facebook:hover {background-position:-26px; padding:10px;}
See it in action: http://jsfiddle.net/bendaggers/qQFVV/
What im trying to replicate:
http://readwrite.com/2013/08/29/it-has-been-a-bad-summer-for-apples-ios-7#_tid=popular-feed&_tact=click+%3A+A&_tval=2&_tlbl=Position%3A+2
(notice the share buttons at the right side of your screens? yeah, that's
right!)
By the way, feel free to modify everything if that would make it easier
for you.
Thank you very much!