Question

For some reason the classes that I have set for my images are not showing the images that I have set however I have worked out if I do .book li, a.foo I can get them to show 5 images of one set class.

How could I get my classes to show each individual image?

HTML:

                <div class="book">
                        <ul>
                            <li><a class="twitter" href="#"></a></li>
                            <li><a class="facebook" href="#"></a></li>
                            <li><a class="flickr" href="#"></a></li>
                            <li><a class="linkedin" href="#"></a></li>
                        </ul>
                </div>

CSS:

.book ul{
    width:250px;
    height:70px;
    list-style:none;
    display:block;
    margin:-15px 0 25px 0;
}
.book li{
    width:70px;
    height:70px;
    display:inline-block;
    float:left;
    margin:0 0 0 -30px;
    padding:0 20px 0 0;
}

.book li a.twitter{
    background: url(images/twitter.png) no-repeat;
    height:70px;
    width:70px;
}
.book li a.facebook{
    background: url(images/facebook.png) no-repeat;
    height:70px;
    width:70px;
}
.book li a.flickr{
    background: url(images/flickr.png) no-repeat;
    height:70px;
    width:70px;
}
.book li a.linkedin{
    background: url(images/linkedin.png) no-repeat;
    height:70px;
    width:70px;
}   

Answer 1

<a> tags are inherently inline elements, so they usually don’t take kindly to adding a background image without adding some sort of content/text in the foreground.

Try adding display:block; to your .book li a elements

You can also consolidate your height and width properties by adding them to the generic (non-id-based) .book li a too.

.book li a {
  display: block
  height: 70px;
  width: 70px;
}

Then you just have to specify background for the id’s