Question

I have the following html inside a <div>:

<span class="footer-icons">
    <a href="#;" class="facebook" title="Facebook">Facebook</a>
    <a href="#;" class="twitter" title="Twitter">Twitter</a>
</span>

And my CSS:

#footer .footer-icons {
    float: right;
    margin-right: 10px;
}
#footer .footer-icons {
    text-indent: -9999px;
}
#footer .footer-icons .facebook {
    background: url("../images/new/footer-icons.png");
}

The problem with this is that the text-indent is causing the background-image to move also. How would I make it such that I can ‘escape the text’ (for example, using text-indent: -9999px) and keep the background image in place?

Answer 1

here is the working fiddle: http://jsfiddle.net/surendraVsingh/qdFNM/5/ (Updated)

Add display:inline-block & give a width & height to that div same as image.

CSS

.footer-icons {
    margin-right: 10px;
}
.footer-icons {
    text-indent: -9999px;
}
.footer-icons .facebook {
    background: url("https://dl.dropbox.com/u/19982181/fab/fb.jpg") no-repeat left top ;
    width:20px; height:20px;
    display:inline-block;
}
.footer-icons .twitter {
    background: url("https://dl.dropbox.com/u/19982181/fab/tw.jpg") no-repeat left top ;
    display:inline-block;
    width:20px; height:20px;
}