Question

I’ve been trying to create a small social media bar for my website.For some reason which I can’t work out the images which I want to use to create a sprites won’t load. I should also mention that I have had similar problems with background-image not displaying.

HTML call is this:

<div id="socialbar">
    <div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>
    <div class="twitter"><a href="https://twitter.com/DarrenLumber">Twitter</a></div>
    <div class="facebook"><a href="http://www.facebook.com/Dazzla2020">Facebook</a></div>
    <div class="youtube"><a href="http://www.youtube.com/user/dazzla2020">YouTube</a></div>
    <div class="flickr"><a href="http://www.flickr.com/photos/dazzla2020/">Flickr</a></div>
</div>

CSS looks like this:

#socialbar
{
    width: 245px;
    margin: 0px;
    display: inline;
    border: 0px;
}

#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.plus
{
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px -32px;
}

#socialbar a.twitter
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.twitter
{
    background-image: url('http://www.mediafire.com/conv/d2133ecf83fc76b78008ed1357a8fb8213e6c2300c26f6af3b1758c576ed17db6g.jpg');
    background-position: 0px -32px;
}

#socialbar a.facebook
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.facebook
{
    background-image: url('http://www.mediafire.com/conv/df04514676d02be959e52f440b9c10e82d09eefdb82d34fdd336a896be551d026g.jpg');
    background-position: 0px -32px;
}

#socialbar a.youtube
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.youtube
{
    background-image: url('http://www.mediafire.com/conv/6de4cbb7ecf8e81a25e0ebe35e2cb82af5859b4b2cb3ac9c3ec2fe8c62348c296g.jpg');
    background-position: 0px -32px;
}

#socialbar a.flickr
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

#socialbar a:hover.flickr
{
    background-image: url('http://www.mediafire.com/conv/dbab33ccef1c60b2974d10a0323f7bb04f594f3b57468dc1a7be8551eb9d1b176g.jpg');
    background-position: 0px -32px;
}

Your find my code here also:
http://jsfiddle.net/Yx8tT/122/
(Please note that i am using another host for this as the host for my website does not allow direct links to images etc for anything other than my actual website)

And the site in question being:
http://www.darrenlumber.co.uk

Thanks inadvance!

Answer 1

You aren’t applying your css to the plus elements.

<div class="plus"><a href="https://plus.google.com/u/0/105252399036646613257/posts">Google Plus</a></div>


#socialbar a.plus
{
    display: block;
    float: left;
    height: 32px;
    width: 32px;
    text-indent: -9999px;
    background-image: url('http://www.mediafire.com/conv/9452d5f77f6e5e7e91294b54b9a74d18029cbeae2075ef9d12787e7631f849226g.jpg');
    background-position: 0px 0px;
    margin-left: 5px;
    margin-right: 5px;
}

The selector should be:

#socialbar .plus a

and so on for each of the others.