Подчеркивание картинок-ссылок в firefox @ DeForum.ru

Простая кнопка меню - иконка и подчеркнутый текст, при наведении мышки на иконку или на текст - подчеркивание исчезает. Работает везде, кроме фаирфокса - там картинка и ее паддинг тоже подчеркиваются. Как убрать подчеркивание только с картинки? Желательно не добавлять дополнительный класс для текста, потому что у меня таких кнопок с разными стилями дофига.

Код:

<style>

.button img {
     padding-right: 5px;
}

.button:hover {
     text-decoration: none;
}

</style>

<a href="#" class="button"><img src="icon.gif">button</a>

(код отредактирован, вопрос не отменяется)

поможите просим

Была (и осталась) та же проблема в Safari. Ничего не помогло, забил :cry:

Но ведь как-то же люди справляются? Или все добавляют лишний класс только для этих браузеров?…

держи

Код:

a.button:hover {
     text-decoration: none;
}

[cyber]form, ааааааа

Прости, я коде для примера ошибку сделала.

Код:

<style> 

.button img { 
     padding-right: 5px; 
} 

.button:hover { 
     text-decoration: none; 
} 

</style> 

<a href="#" class="button"><img src="icon.gif">button</a> 

Проблема в подчеркивании в Фаирфоксе

ааа.

дык, всё просто.

картинку в бэкграунд.

либо вынеси картинку за пределы тэга <a>

Код:

[cyber]form, в бекграунд - придется для каждой кнопки свой класс делать. А у меня много одинаковых кнопок с разными названиями и иконками. А за пределы - это означает, что при наведении мышки на картинку, подчеркивание не будет исчезать. :lady:

От тож. Потому проблема не решена. Проверил, в FF у меня тоже подчеркивание, следовательно, FF и Safari - братья по несчастью.

Кстати, я когда пытался побороть эту проблему, добивался максимум того, что если делать ссылку без подчеркивания (текст), то все нормально... но сслыки должны были быть подчеркнутыми.

Решение есть - добавить спэн класс на текст, и подчеркивать только его. Но очень впадлу...

91 Сообщения: 1163 Зарегистрирован: 26.01.05

Лампочка писал(а):

Решение есть - добавить спэн класс на текст, и подчеркивать только его. Но очень впадлу...

Да ладно, пара лишних строчек всего.

Код:

<style>
.button {
  text-decoration: none !important; 
  text-decoration: underline;
}
.button img {
    padding-right: 5px;
    border: 0;
}
.button:hover {
    text-decoration: none;
}
.button:hover u {
  text-decoration: none;
}
</style>

<a href="#" class="button"><img src="icon.gif"><u>button</u></a> 

Jamakaser, понятно

А это что за зверь? Зачем такое?

Код:

text-decoration: none !important; 
text-decoration: underline;

Jamakaser, well done!

А зачем
text-decoration: underline; ?

91 Сообщения: 1163 Зарегистрирован: 26.01.05

zadrali_registracijami писал(а):

А зачем
text-decoration: underline; ?

Баг шестого эксплорера, без этого

Код:

.button:hover u {

не отработает.

91 Сообщения: 1163 Зарегистрирован: 26.01.05

Но можно сделать элегантнее.

Код:

.button {
     text-decoration: none;
}
.button img {
    padding-right: 15px;
    border: 0;
}
.button:hover, .button:hover u  {
    text-decoration: none;
    font-size: 100%;
}

Смысл в том что стиль для .button и .button:hover должен отличаться. Если, например, изменяется цвет ссылки - то font-size: 100% не нужен.

Всё это элегантно, но я вобще не вижу проблемы -- работает и так. Может, надо попробовать с доктайпом?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
.button {
     text-decoration: underline;
}
.button img {
     padding: 5px;
}
.button:hover {
     text-decoration: none;
}
 
-->
</style>
</head>
<body>
<a href="#" class="button"><img src="001.gif">button</a>
</body>
</html>

Если расписывать стили для ссылок полностью, то пользуемся древним правилом LoVe HAte (в коде выше этого, конечно, нету напрочь), это так, просто ремайндер...

картинка и текстовая ссылка / оно же hover

91 Сообщения: 1163 Зарегистрирован: 26.01.05

tentoys,

Работает :-)

Только вы в курсе что, если в DOCTYPE не указать URL, браузер начинает работать в quirks mode?
А оно нам надо? Нет, оно нам не надо.
Зачем его тогда вообще писать?

Jamakaser,
ну, указание или не указание URL в доктайпе говорит лишь о местоположении спецификации. Не факт, кстати, что указав адрес, мы получим валидность, случается и обратное

Вобщем, да, желательно указывать. Как правильно -- здесь вроде есть список, как правильно

Jamakaser, tentoys, :beer:

DeДверь
Логин:
Пароль:
	Автологин