How do I hide the text links over a toggleable horizontal list with background images.

Question

I'm trying to create a UL/LI horizontal list with background images only, with no text link visible. The reason for this is so that when I over over a list item, the background would rollover and when I click on it the current item would toggle. basically it is a horizontal menu with background images that can be toggled; mimicking the job of a radio button.

I have done it like this;

<div id="options">
<ul id="list"> 
    <li class="active"><a href="#" class="option1 active" id="link1"><span>XXXXX</span></a></li> 
    <li><a href="#" class="option2" id="link2"><span>XXXXX</span></a></li> 
    <li><a href="#" class="option3" id="link3"><span>XXXXX</span></a></li> 
</ul> 
</div>

The CSS for option1, option2 and option3 simply define the background image.

#options LI{list-style-type: none; display : inline}
a.option1{ background:url('../images/option1.png') no-repeat;}
a.option2{ background:url('../images/option2.png') no-repeat;}
a.option3{ background:url('../images/option3.png') no-repeat;}

a.option1,  a.option2, a.option3{
 background-position:top;
 display:inline;
 width:230px;
 height:40px;
}

And the hover & active css part simply sets the background position like so-

a.option1:hover, a.option2:hover, a.option3:hover{
 background-position:bottom;
}

a.active{
 background-position:bottom !important;
}

This works fine, however on top of the background I get the words "XXXXX" as text links and I'm struggling to hide them. They are interfering with the hover action and preventing rollover (even if I replace XXXXX with a period or something short).

I can't just remove the text from the link as it would hide the whole LI element. I have tried to use

display:none; or text-indent:-999px

but then the whole UI element becomes invisible. I can't understand what I'm doing wrong.

Are you able to help?

Thanks

Answer 1

you need to use something along these lines:

height: 0;
padding: height_of_image 0 0 0; 
overflow: hidden;
display: block;

In you css - this will height the text as the overflow is hidden but allow the image to be shown. This would be applied to the href so the hover should still work. The background image would be applied here too.

Answer 2

I think your difficulty is coming from the display: inline; declaration on your as. You want the as to display in block mode so that your width and height declarations will properly take effect. Alter your code like so:

a.option1,  a.option2, a.option3{
 background-position:top;
 display:block;
 width:230px;
 height:40px;
}

Now you want to remove the text, so add the text-indent trick like so:

a.option1,  a.option2, a.option3{
 background-position:top;
 display:block;
 width:230px;
 height:40px;
 text-indent:-999em;
 overflow:hidden;
}

Hope that helps!