Прозрачное меню в ie6
Доброго времени суток! Есть прозрачное выпадающее меню (http://netsite.su), которое отлично работает под ff и другими браузерами кроме ie6. Для получения прозрачности используется функция:
function fixPNG(element) { if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) { var src; if (element.tagName == 'IMG') { if (/\.png$/.test(element.src)) { src = element.src; element.src = "/images/blank.gif"; } }else { src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i); if (src) { src = src[1]; element.runtimeStyle.backgroundImage = "none"; } } if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; } } Соответственно в стиле дива пишу filter: expression(fixPNG(this)); Так же использовался jquery (pngFix), но во всех случаях результат один и тот же: в шестом експлорере при наводе на второй или последующие пункты меню пропадает :( При этом прозрачность есть. Подскажите в чем может быть проблема? P.S. С новым годом! |
В том, что фильтр AlphaImageLoader рисует изображение поверх элемента и его детей.
Так что картинка в IE6 просто перехватывает события, которые должны работать на этих элементах. Попробуйте "утопить" блок с картинкой с помощью z-index, а блок, принимающий события наоборот поднять. |
Спасибо огромное за ответ! Войти под своим ником не получилось:(
По теме нашел статью http://www.satzansatz.de/cssd/tmp/al...nsparency.html. Сделать чтобы оно не пропадало получилось, но с одной оговоркой: если под меню пусто, то все хорошо, если же под ним картинка, то оно исчезает. Это хорошо видно вот тут: http://netsite.su/profile/basket. Раздел Профиль работает как надо, а раздел Продукт - нет. При наведении курсора ниже первого пункта, все пропадает. |
Меню слишком прозрачное, при наведении на пункт «Заказ», просвечиваются надписи «Корзина» и «Ваша корзина пуста», которые мешают чтению пунктов меню.
Чтобы «AlphaImageLoader» работал корректно, для блока, к которому он применяется должны быть заданы размеры. |
Не помогло. Что было сделано: фильтр был применен не на элемент ul, а на элемент li, у которого можно задать высоту и ширину. Результат тот же: как только убираем курсор с текста, и под меню есть изображение или текст, оно пропадает. Если же под ним ничего нет, то все хорошо.
|
Решение нашлось через этот скрипт http://www.dillerdesign.com/experiment/DD_belatedPNG/. Он не использует фильтр AlphaImageLoader, не создавая путаницы с z-index'ом.
|
Часовой пояс GMT +3, время: 13:53. |