Проблема с созданием рамки вокруг рисунка-ссылки

flower

Новичок
Проблема с созданием рамки вокруг рисунка-ссылки

Нужно обводить картинку-ссылку рамкой при наведении на неё мышки.

<html>
<head>
<style>
a:hover {border:1 solid red}
</style>
</head>
<body>

<a href=123><img width=100 height=100></a>

</body>
</html>

В IE всё нормально, в Опере рамкой выделяется только небольшая область снизу картики. Что придумать на цсс (не на джаве)?
 

Garret

Кто здесь?
px видно? Просто сделай и посмотри.

Вообще то результат будет не совсем такой как надо. Поэтому нужно делать на картинке события onmouseover и onmouseout, и в этих событиях меняй цвет рамки рисунка.
 

flower

Новичок
Автор оригинала: Garret
px видно? Просто сделай и посмотри.
Вообще то результат будет не совсем такой как надо. Поэтому нужно делать на картинке события onmouseover и onmouseout, и в этих событиях меняй цвет рамки рисунка.
Разумеется, сделал и посмотрел, разницы никакой, как и следовало ожидать. Нужно делать только средствами цсс, без джавы.
 

flower

Новичок
Автор оригинала: Luerssen
подсказка:
#1 -> a:hover img {}
#2 -> [size[px*/em/pt]][ style][ color]
#2.2 -> * = default
a:hover img делал. не получается добиться работоспособности в опера и ie: то, что работает в одном, не работает в другом. хоть браузер детекти и код формируй в зависимости от результата :)
насчёт #2 и #2.2 не понял, подскажите...
 

flower

Новичок
Все варианты присвоения рамки рисунку, являющемуся ссылкой, по-разному работают в Опере и IE. То, что работает в одном - не работает в другом. Есть универсальное решение - то, что в первом посте. Но в Опере рамка получается не вокруг рисунка; ей обводится как бы небольшая строчка позади рисунка. Вот в чём проблема.
Так что остаётся только определять тип браузера и формировать код на лету. Универсального решения в css не нашлось...
 

an9eldust

Новичок
Автор оригинала: flower
Все варианты присвоения рамки рисунку, являющемуся ссылкой, по-разному работают в Опере и IE. То, что работает в одном - не работает в другом. Есть универсальное решение - то, что в первом посте. Но в Опере рамка получается не вокруг рисунка; ей обводится как бы небольшая строчка позади рисунка. Вот в чём проблема.
Так что остаётся только определять тип браузера и формировать код на лету. Универсального решения в css не нашлось...
Жесть.
Пишешь следующий код:

a:hover {
zoom: 1;
}
a:hover img {
border: 1px solid red;
}

Радуешься жизни.
 

flower

Новичок
Отлично!
Работает одинаково в обоих браузерах, хотя использование zoom мне, если честно, не понятно :)

zoom

Определяет масштаб элемента. Работает только в IE.

Значение:
число с плавающий точкой, где 1.0 нормальный размер.
любое соответствующее стандарту процентное значение, где 100% нормальный размер.
Разве по умолчанию zoom не равен 1?...
 
Сверху