Image Navigation Using text-indent

Question

Hello, I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:

<div id="nav">
  <ul>
    <li class="current about">
      <a href="#about" title="about">about</a>
    </li>
    <li class="contact">
      <a href="#contact" title="contact">contact</a>
    </li>
    <li class="networks">
      <a href="#networks" title="networks">networks</a>
    </li>
  </ul>
</div>

Here is my CSS:

#nav li {
   display: block;
   float:left;
   background-image: url("images/nav-normal.png");
   height:47px;
   text-indent: -9999px;
}

I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!

Answer 1

Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.