Ссылка с картинкой и текстом

Когда делаешь ссылку с картинкой под которой находится текст, который относится к этой же ссылке, то эффект подчёркивания ссылки передаётся и на картинку. Не очень красиво получается. Вот код, чтобы понятнее было о чём я

Код: [развернуть]

<a href="link"><img src="picture.jpg" border="0"><br>text</a>

Намекните как сделать, чтобы текст подчёркивался, а картинка нет. Когда разбиваю это на две ссылки, то всё нормально, но хочется, чтобы это была именно одна ссылка. Раньше вроде такого не было - всегда так делал, а в FireFox'е наверно появилась эта тема. Вобще нормально использовать <br> в этом месте или есть более правильные способы?

Понимаю, что вопрос пустяковый и ответ может быть очень простой, но всё-таки надеюсь на помощь. Желательно ответить не очень кратко типа "смотри в сторону CSS", а немного конкретнее.

Последний раз редактировалось: zombi (20/09/11 в 20:39), всего редактировалось 1 раз

text-decoration: none для картинки внутри ссылки не сработал)

пока додумался до такого:
text выделить каким-нибудь тегом, например b или strong или span:
<b>text</b>

для ссылки в css указать:
a {text-decoration: none}

для тега b внутри a указать:
a b {text-decoration: underline}

Ну вообще для фф вроде достаточно размеры пиксы указать, и подчеркивания не будет.

Проверил - размеры есть, подчёркивание тоже.

Petek писал:

text-decoration: none для картинки внутри ссылки не сработал)

text-decoration срабатывает, но точно также как для текста.

Уточню задачу. Мне надо, чтобы подчёркивание появлялось при
a:hover, а в остальных случаях чтобы его не было.

Petek писал:

пока додумался до такого: text выделить каким-нибудь тегом, например b или strong или span: <b>text</b> для ссылки в css указать: a {text-decoration: none} для тега b внутри a указать: a b {text-decoration: underline}

Идею понял. Именно для a:hover такое реально реализовать?

zombi писал:

Идею понял. Именно для a:hover такое реально реализовать?

ну вместо a напиши a:hover

a {text-decoration: none}
a:hover b {text-decoration: underline}

Работает, спасибо.

Не сочти за наглость, но как это прописать для отдельного класса.

Код: [развернуть]

<a class="underline" href="link"><img src="picture.jpg" border="0"><br><b>text</b></a>

a.underline:hover b {text-decoration: underline}

Вот так вроде получилось
a:hover.underline b {text-decoration: underline}

Спасибо.