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">English</a></div>

```

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?