Using a sprite sheet for icons in css

Question

i'm having trouble getting this to work for some reason.

Heres the icon sheet i want to use:

My problem is that even though I've tried setting the width and height of both the <li> items and the <a> items i can't see the 25x25px icon, i can only see as much of the background as is covered by the text inside <a> (which i intend to get rid of of course!)

Could you tell me what i'm doing wrong? Thank you!

Here's a jsfiddle that shows my code and the problem.

Or you could look at my code below:

html:

<div id="connect">
                <h4>Stay Connected</h4>

                    <ul class="icons">
                    <li><a  class="blogger" href="#blogger">a</a></li>
                    <li><a class="linkdin" href="#linkd">b</a></li>
                    <li><a class="facebook"  href="#facebook">c</a></li>
                    <li><a class="twitter" href="#twit">d</a></li>
                   </ul>
            </div>

css:

#connect ul.icons{list-style: none;}
        #connect ul.icons li{
             width: 25px;
            height: 25px;
        }
        #connect ul.icons li a {
            width: 25px;
            height: 25px;
            background-color: red;
            background-image: url('../IMG/iconset.gif');
        }
            #connect li a.blogger{background-position:100px 0px; }
            #connect li a:hover.blogger{background-position:100px 25px;}
            #connect li a.linkdin{background-position:50px 0px;}
            #connect li a:hover.linkdin{background-position:50px 25px;}
            #connect li a.facebook{background-position:25px 0px;}
            #connect li a:hover.facebook{background-position:25px 25px;}
            #connect li a.twitter{background-position:75px 0px;}
            #connect li a:hover.twitter{background-position:75px 25px;}

Answer 1

You need to make the a element display:block.