Stranger than Fiction

На одном из разработанных мной сайтов, я использую следующую технику для замены текста некоторых элементов (заголовков, ссылок) изображениями (уже не помню где я позаимствовал эту технику, и уж тем более не помню, как она называется. Наверно, что-то-тамIR :)):

#sidebar h1 a {
    display: block;
    text-indent: -3000px;
    width: 251px; /* ширина изображения */
    height: 100px; /* высота изображения */
    background: url(../images/logo.png) left top no-repeat;            
    padding: 0;
    background-color: transparent;
    border: none;
    text-decoration: none;
}

Эта техника работала прекрасно до тех пор, пока я не установил новую версию Firefox.

В новом Огнелисе я заметил, что при установлении фокуса на подобной ссылке, левая граница фокуса простирается до края окна браузера:

К счастью, решение этой проблемы довольно простое: overflow: hidden;

Целиком стилевое описание элемента выглядит так:

#sidebar h1 a {
    display: block;
    text-indent: -3000px;
    overflow: hidden;
    width: 251px; /* ширина изображения */
    height: 100px; /* высота изображения */
    background: url(../images/logo.png) left top no-repeat;            
    padding: 0;
    background-color: transparent;
    border: none;
    text-decoration: none;
}