firefox и фоновая картинка в <a>

Обсуждение вопросов клиентского программирования.

Модератор: Duncon

Ответить
Аватара пользователя
__Yuri__
Сообщения: 140
Зарегистрирован: 02 ноя 2006, 17:17
Контактная информация:

Господа, давно не брал я в руки шашек - пособите плиз.
Вобщем, мысль такая - "подсвечивать" картинки-ссылки фоновой картинкой при наведении на них мышкой . Картинки-ссылки расположены в таблице.

Если менять фон в <td> по событию: mouseover= "this.style.backgroundImage='url(images/menu/backlight.gif)';", то все работает и в IE и в FF.


А вот более красивое решение с заменой фона не у <td>, а у <a>, что можно сделать средствами CSS (a:hover) не прокатывает, из-за того, что FF режет фоновую картинку :( Вот здесь примерчик, демонстрирующий разницу между IE и FF:
http://www1.hut2.ru/test/anchor_bg_picture.html

Проверял на Firefox 2.0 и Minefield (FF x64) 3.0a1.
Аватара пользователя
Oscar
Сообщения: 963
Зарегистрирован: 29 май 2004, 13:44
Откуда: Мюнхен (рожден в Киеве)
Контактная информация:

FF не позволяет устанавливать WIDTH и HEIGHT у элементов <a>
и как по мне - это правильно.

Это текстовые элементы, их ширина - колличество символов*ширина символа в выбранном шрифте.
высота - колличество линий в тексте*высоту символа в шрифте,
и то, что ширина подгоняется под ширину внутренней картинки - это скорее баг ))

и вообще CSS hover лучше не доверять, это не слишком удачная фича.
с тех пор, как люди научились пользоваться JS, она просто не нужна.

так что мой совет: используй свой первый вариант.
Аватара пользователя
__Yuri__
Сообщения: 140
Зарегистрирован: 02 ноя 2006, 17:17
Контактная информация:

Сыпасибо!
Начинаю вспоминать по-маленьку...
Поставил в <a> style font-size:высота фоновой картинки - все заработало через CSS.
Я очень люблю JavaScript, но в данном случае очень много файлов, а в каждом достаточно таких ссылок - намного проще поддерживать через external.css
и вообще CSS hover лучше не доверять, это не слишком удачная фича.
с тех пор, как люди научились пользоваться JS, она просто не нужна.
Вообще все было с точностью до наоборот - когда я научился пользоваться появившемся в NN JavaScript, CSS еще в проекте не было. Изображение
Аватара пользователя
Nikoshka
Сообщения: 120
Зарегистрирован: 15 май 2006, 05:24

FF не позволяет устанавливать WIDTH и HEIGHT у элементов <a>
и как по мне - это правильно.
Можно сделать его как display:block; тогда <a> станет вести себя как блок div
Можно попробовать сделать им padding и подсвечивать

p.s. Может рамку сделать? Вообще td нужно использовать тоже по мойму через hover можно для него указать, тогда все будет нормально.
Аватара пользователя
__Yuri__
Сообщения: 140
Зарегистрирован: 02 ноя 2006, 17:17
Контактная информация:

Спасибо!
Добавил и block.
Примерно вот так:
http://www1.hut2.ru
Кстати, извиняюсь за offtopic - не подскажите где разместить страничку, а то на hut2 прибьют - т.к. закрываю слоями их банеры.
berkut
Сообщения: 82
Зарегистрирован: 26 авг 2004, 19:07

не сайт, а ахтунг!!
Аватара пользователя
Nikoshka
Сообщения: 120
Зарегистрирован: 15 май 2006, 05:24

berkut,
Все произошли обезьян, еще научится :)
Аватара пользователя
Duncon
Сообщения: 2085
Зарегистрирован: 10 окт 2004, 14:11
Откуда: Питер
Контактная информация:

Все прикольно, нормальная кислота..
Аватара пользователя
__Yuri__
Сообщения: 140
Зарегистрирован: 02 ноя 2006, 17:17
Контактная информация:

Это не сайт банка Москвы или TNK-BP. Он отражает мой внутренний мир (я в центре). И это не окончательный вариант, а эскиз. С целью проверить некоторые решения, в частности масштабируемость страницы при изменении юзером размера окна.
И никакой не ахтунг - моя ориентация старомодна и гетеросексуальна. Если будут конктетные замечания, восприму с глубокой благодарностью.

Duncon +1 :)
Аватара пользователя
Duncon
Сообщения: 2085
Зарегистрирован: 10 окт 2004, 14:11
Откуда: Питер
Контактная информация:

Таки ставь а не пиши, а про замечания, да ну хз, здесь нечего править, конечно чего-то не хватает пару штрихов ибо есть некий некконект картинок меню с фоном, а морда по кайфу...
Самое главное сайт передает некую атмосферу..
Ответить