Навигация по изображению Использование текстового отступа

Question

Я пытаюсь создать простую навигацию изображения для своего сайта, используя CSS, чтобы объявить свойство background-image элемента списка (li). Проблема в том, что, когда я использую text-indent, чтобы поместить изображение за пределы экрана, ссылка больше не существует (за исключением экрана, как я полагаю). Любая помощь будет принята с благодарностью. Вот мой 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> 

Вот мой CSS:

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

Я также установить фоновую-позицию для отдельных элементов списка, потому что я использую image sprites. Заранее спасибо!

Answer 1

Применить этот стиль к #nav li a. В противном случае все внутри li, включая ссылку, сдвигается с экрана.