A:hover в случае с картинкой в ссылке не работает.

Здравствуйте, уважаемые гуру. Помогите пожалуйста. Создал я таблицу, в каждой ячейке ссылка-картинка обрамленная однопиксельной каемкой. Ну думаю, ситуация известная.Хочу что бы каемка меняла цвет при наведении мышки. С самого начала все работало нормально и по сей день работает в Опереи ФФ, а ИЕ затрахал! Не знаю что делать! По разному извращался, остановился на:

Код:

#pic a:link img {    border: #FF0000 solid 1px; } #pic a:visited img {    border: #FF0000 solid 1px; } #pic a:hover img {    border: #FFFF99 solid 1px; } #pic a:active img {    border: #FFFF99 solid 1px; } ... <table id="pic" width="936" border="0" align="center" cellpadding="2" cellspacing="0">   <tr>     <td width="152"><a href="#"><img src="#" width="150" height="200"/></a></td> ... </table>

Конечно код не вылизан до мелочей, но постарался все учесть...
Подскажите как укротить чертов ИЕ ! Возможно проблема в том что у меня 6-й стоит, если в 7-м работает нормально - отпишите пожалуйста.

а у самой то картинки border=1 пропиши

я так делал:
для вообще всех картинок со ссылкой
a:active img { border: 1px solid #ffffff; border-style: solid; }
a:link img { border: 1px solid #ffffff; border-style: solid; }
a:visited img { border: 1px solid #ffffff; border-style: solid; }
a:hover img { border: 1px solid #FF7500; border-style: solid; }

и для тех картинок со ссылкой, для которых бордер не нужен отдельный класс
.a1:link img {border: 0px solid #ffffff; border-style: solid;}
.a1:visited img {border: 0px solid #ffffff; border-style: solid;}
.a1:hover img {border: 0px solid #ffffff; border-style: solid;}
.a1:active img {border: 0px solid #ffffff; border-style: solid;}

вот такая шняга обязательна
a {text-decoration: none;}
a:hover {text-decoration: underline; }


потом самое интерестное -
.gallery img { border:2px #4a4743 solid;}
.gallery a:hover img { border:2px #FF00FF solid;}

и вс везде работает и рамки меняют цвет при наведении(главное обязательно вставь то что вверху)

Код:

.highlight img {    border: 5px solid #488EB3; } .highlight:hover img {    border: 5px solid #FFFFFF; } .highlight:hover {    color: #FFFFFF; /* Dumb definition for MSIE */ }

если не решил еще попробуй не для таблицы класс pix присваивать, а для конкретной картинки, тогда думаю работать должно в ИЕ
ps: если что отпиши самому интересно

to pes:
Ну вроде как работает, спасибо, но мне нужно было именно под блок что бы было, не хочу по десять раз перекрывать в css нужные свойства.

to Yoni:
Не получилось что то (

to adultdream:
Да пробовал с самого начала, не работало почему то! (

to DustTieR:
Твой вариант заработал, только я его модифицировал под свои нужды слегка, да и что бы все ссылки не затрагивать на странице сделал так:

Код:

#pic a {    text-decoration: none; } #pic a:hover {    text-decoration: underline; } #pic img {    border: 1px #FF0000 solid; } #pic a:hover img {    border: 1px #FFFF00 solid; }

Ну а потом как ID таблице прописал, соответственно. Все работает.

Всем спасибо за ответы, оценил. Надеюсь тема оказалась кому то полезной!

З.Ы. Мне тут шепнули что в Опере поддержка css испокон веков соответствует рекомендациям W3C, в результате то таблицы работают должным образом почти всегда ! ;-)

можно еще вот так.
проверено. работает давно и надёжно везде.
ФФ, ИЕ, Опера, Сафари

стили:
a.thumb {
border: 1px solid #FFFFFF;
display: block;
height: 180px;
width: 240px;
margin: 0px;
padding: 0px;
}
a.thumb:hover {
border: 1px solid #000000;
display: block;
}


html:
<a href="#" class="thumb"> ну тут типа код ротатора </a>

adde.biz писал:

можно еще вот так. проверено. работает давно и надёжно везде. ФФ, ИЕ, Опера, Сафари

Работает ! )Но только с одной странностью ) отображается в ИЕ рамка не в 1 px явно ! ) ставлю бордер 1, становится нормально! Но в Опере тогда появляется каемка цвета подчеркивания ссылки, кроме заданного цвета каймы ! ;-) В общем пути css неисповедимы ! )))

borgivan писал:

to pes: Ну вроде как работает, спасибо, но мне нужно было именно под блок что бы было, не хочу по десять раз перекрывать в css нужные свойства.

ну я это для сиджа делал
там 99% кликабельных картинок - это как раз тумбы
потому, чтоб каждой стиль не прописывать, так и делал...
кто тебе мешает наоборот у нужных картинок стильпрописать с бордером?

Мой вариант более приемлем, потому что он без гемора.Но есть еще такая мулька - скрипт весом 4 кб который добавляется через CSS.Он позволяет делать ховеры на ВСЕ !!!!
Добавляеться в CSS так -
body {behavior:url("hover.htc"); }
сам скрипт - http://dusttier.110mb.com/sites/1/hover.htc
вот пример работы его( ховер на "p")
http://dusttier.110mb.com/sites/1/search.html

из личного опыта...
я делал так:
.gr5{border-color: #990000;}
.gr4{border-color: #ffcc99;}

<td><a href="#"><img src="рисунок.jpg" class="gr4" OnMouseOut="className='gr4'" OnMouseOver="className='gr5'" border="1" ну и тд...></a></td>
проверял везде где мог, вроде работает )

Ну яваскрипт, конечно, будет везде работать.А твой способ можно применить к другим тегам, например td,p,div.....?