CSS - How to make the A Link work inside a DIV with background image

Question

Hello all,

#tab-ver.tab {
    background: url(../images/16by16.png) no-repeat center center;
    text-indent: -10000em;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
}

<div id="tab-ver" class="tab"><a href="http://www.yahoo.com"&gt;English&lt;/a&gt;&lt;/div&gt;

The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.

However to fix this problem?

Thank you

// update001//
I have tried the following suggestion:

#tab-ver.tab {
    text-indent: -10000em;
}
#tab-ver.tab a{
    background: url(../images/16by16.png) no-repeat center center;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
    display: block;
}

It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.

thank you

// update 1 //

Based on the suggestion, the following script works best for me

#tab-en-ver.tab a {
    background: url(../images//16by16.png) no-repeat center center;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
    text-indent: -10000em;
}

However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.

by adding the following extra rule will cause the image disappear.

#tab-ver.tab {
 text-indent: -10000em; 
}

any idea?

Answer 1

Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.

EDIT: try inline-block instead and see if it helps.

#tab-ver.tab a {
    display: inline-block;
    background: url(../images/16by16.png) no-repeat center center;
    text-indent: -10000em;
    height: 16px;
    width: 16px;
    padding: 4px 1px;
    margin-right: 1px;
    margin-left: 50px;
}

Answer 2

You can have the a tag fill up the div by using:

a {
    display: block;
    height: 16px;
}

You can then also remove the height from the div as it will grow automatically.

Answer 3

If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:

<img src="english-flag.png" alt="English" />

You can also use some CSS hacks, but:

1. What for? It's so easy to do it with plain HTML!
2. Those are hacks, so they may work or not in different browsers.

One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:

a{
    padding-left:16px;
    overflow:hidden;
    display:block;
    width:16px;
    height:16px;
    url(../images/16by16.png) no-repeat left top;}

<a href="...">English</a>