Проблема отображения background в браузере Opera

[alex115]

Коллеги, разбираюсь с сайтом, сверстанным на Joomla 2.5. Адрес сайта: http://poctok.by

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

Фрагмент CSS, где описаны параметры элементов выпадающего меню, выглядит так:

.dj-main li:hover ul.dj-submenu {

left: 0;

top: 46px;

background: #ededed url(../images/submenu_bg.png) repeat bottom left !important;

padding: 0;

margin: 0;

width: 210px;

height: auto;

z-index: 300;

}

Такое впечатление, что после загрузки страницы что-то фон портит. Но никак не могу найти, где. Подскажите, пожалуйста, в чем причина. Буду очень признателен.

Edited August 14, 2013 by alex115

[antonKar]

В стилях попробуйте вместо .dj-main li.hover использовать .dj-main li:hover

[alex115]

В стилях попробуйте вместо .dj-main li.hover использовать .dj-main li:hover

спасибо. но, честно говоря, не понял.

Edited August 15, 2013 by alex115

[antonKar]

Фрагмент CSS, где описаны параметры элементов выпадающего меню, выглядит так: .dj-main li:hover ul.dj-submenu

У вас перед hover на самом деле стоит не двоеточие, а точка. Причина возможно в этом.

[alex115]

Фрагмент CSS, где описаны параметры элементов выпадающего меню, выглядит так: .dj-main li:hover ul.dj-submenu

У вас перед hover на самом деле стоит не двоеточие, а точка. Причина возможно в этом.

ясно. спасибо попробую.

увы. не работает. в стилях меню два файла djmenu.css и djmenu_fx.css (не могу разобраться, как присоединить файлы к сообщению). оба файла грузятся поочереди. файлы абсолютно одинаковые за исключением того, что в первом файле стили .dj-main li:hover а во втором они идут с точкой: .dj-main li.hover

[antonKar]

а во втором они идут с точкой: .dj-main li.hover

Firebug показывает, что применяются стили из второго файла, где они идут с точкой.

[alex115]

а во втором они идут с точкой: .dj-main li.hover

Firebug показывает, что применяются стили из второго файла, где они идут с точкой.

попробовал заменить на стили вида li:hover не помогает

[antonKar]

1) Попробуйте к ul.dj-submenu применить clearfix либо overflow: hidden. У li подменю задан float:left, может проблема в этом.

2) Попробуйте этот зелёный фон прописать для li подменю.

Ощущение, что скрипт раскрытия меню что-то слишком много мудрит.

[alex115]

спасибо.

[alex115]

Проблему удалось решить.

из класса .dj-main li:hover ul.dj-submenu

.dj-main li:hover ul.dj-submenu {

left: 0;

top: 46px;

/*background: #ededed url(../images/submenu_bg.png) repeat bottom left !important;*/

padding: 0;

margin: 0;

width: 210px;

height: auto;

z-index: 300;

}

удалил фон и вставил его в класс .dj-main li:hover ul.dj-submenu li a

.dj-main li:hover ul.dj-submenu li a {

display: block;

font-size: 12px;

height: auto;

width: 170px;

line-height: 18px;

color: #000000;

text-decoration: none;

padding: 10px 20px;

background: #ededed url(../images/submenu_bg.png) repeat bottom left !important;

border-bottom: 1px solid #5e5e5e;

}

дополнительно пришлось добавить прорисовку разделителей для элементов выпадающего меню. раньше они были в виде рисунков, но после использованного выше решения разделители пропали. на досуге можно попробовать вернуть назад старые разделители, но, собственно, я не разработчик, а оптимизатор, поэтому описанное решение меня более чем устроило.

Edited August 15, 2013 by alex115