Question

i have a ul style menu looking like this:

<ul>
  <li>
    <a href="/hem/"><span>Hem</span></a>
  </li>
  etc.. etc..
</ul>

the li element has an image as background that changes on hover. i do not want to display the text inside the container and therefore it has visibility: hidden.

Fun thing now; you are still able to click the link in IE and FF but in safari only the mouseover works, but you can’t click the link. Changing the visibility of the span container does make it possible to click the link.

Question now is how to change the css code so that it behaves like IE and FF?
I don’t want to show the text, but i do want to be able to click the menu – duh!

Answer 1

Rather than setting the visibility of the anchor to hidden consider the following:

ul li a
{
   display:block;
   width:100%;
   height:100%;
   text-indent: -9999px; // Hide the text
}

Working Example