2009-02-01 2 views
3

У меня есть раскрывающееся меню, и оно отлично работает на все, кроме IE6 & IE7.выпадающее меню должно отображаться по всему, но оно находится под определенным div

Вот CSS для DIV, где он скрывается под для IE 6/7

#featured-programs-left img, 
#featured-programs-right img{ 
    overflow:auto; 
    border:0; 
} 

#featured-programs-left, 
#featured-programs-right { 
    height:625px; 
    float:left; 
    overflow:auto; 
    clear:left; 
    clear:right; 
    width:100%; 
} 

#featured-programs-left div, 
#featured-programs-right div { 
    overflow:auto; 
    clear:left; 
    clear:right; 
    width:352px; 
    height:345px; 
} 

#featured-programs-left { 
    float:left; 
} 

#featured-programs-right { 
    float:right; 
} 

Вот JQuery (в исходном коде, 'Посмотрите несколько div в каждом главном div (featured-programs-left & -right), и jQuery затухает каждый из них в и в цикле) для displayi нг на несколько элементов (выцветает элементы в и) в обе стороны от DIV (# Рекомендуемые-программы левого & # признакам программы-направо)

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#featured-programs-left').cycle({ 
     fx:  'fade', 
     speed: 'slow', 
     timeout: 15000, 
     next: '#next2', 
     prev: '#prev2' 
    }); 
}); 

$(document).ready(function() { 
    $('#featured-programs-right').cycle({ 
     fx:  'fade', 
     speed: 'slow', 
     timeout: 21000, 
     next: '#next3', 
     prev: '#prev3' 
    }); 
}); 
</script> 

вот и CSS для QuickLinks (Quicklinks является выпадающее меню ссылок)

#header-nav-top li#quicklinks a:link, 
#header-nav-top li#quicklinks a:visited, 
#header-nav-top li#quicklinks a:active { 
    padding-left: .9em; 
    background: transparent url('/site/images/quicklinks_bullet.gif') no-repeat 0em .5em; 
} 

#header-nav-top li#quicklinks.hover { 
    position: relative; 
} 

#header-nav-top li#quicklinks ul { 
    position: absolute; 
    display: none; 
    xleft: -9999em; 
    top: 14px; 
    width: 142px; 
    padding:5px 2px 5px 5px; 
    z-index: 90; 
    margin: 0px; 
    background-color: #00693E; 
    xborder: 1px solid #FDBE2F; 
    xborder-width: 0px 1px 1px; 
} 

#header-nav-top li#quicklinks:hover ul, 
#header-nav-top li#quicklinks.hover ul { 
    left: 0px; 
    display: block; 
} 

#header-nav-top li#quicklinks ul li { 
    background: transparent none; 
    float: none; 
    margin: 0px 0px 0px; 
    line-height: 1.4em; 
    display: block; 
    border:1px solid #00693E; 
} 

#header-nav-top li#quicklinks ul li a:link, 
#header-nav-top li#quicklinks ul li a:visited, 
#header-nav-top li#quicklinks ul li a:active { 
    color: #fff; 
    display: block; 
    text-decoration: none; 
    background: transparent none; 
} 

#header-nav-top li#quicklinks ul li a:hover { 
    color: #C26B1A; 
    background: transparent url('/site/images/bullet_link.gif') no-repeat 0% 6px; 
} 

Как вы думаете, может быть причина того, чтобы не показывать выпадающее меню над элементами в показанных-программах-левых & признакам-программа-прямо в IE 6/7?

ответ

6

Вы пробовали установить z-index изображения, которое в настоящее время скрывает ваше меню, скажем, 0? У вас есть «живой» тестовый URL, на который мы можем смотреть? В качестве альтернативы, на основании того, что IE неправильно обрабатывает z-индекс, у вас есть свобода, чтобы расположить HTML-код выпадающего меню после других элементов на странице, тем самым минуя z-index?

EDIT: А, кажется, есть ошибка. Это link могло бы объяснить, если на самом деле не поможет ... Цитата

из MrTazz:

При выполнении некоторых специальных JavaScript он magicaly помещает DIV в фоне. Обновите div и он возвращается вдаль.

Возможно, попробуйте обновить раскрывающееся меню div каким-то образом, непосредственно перед отображением страницы?

EDIT: Из комментария Брэда, скопированным здесь для назидания будущих читателей: «Это помогло мне: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ я поставил #header иметь Z-индекс 2, и #content иметь Z- индекс 1. " - Brad (5 часов назад)

Итак, подведем итог: в IE 6/7 есть ошибка z-index. Чтобы обойти это, явным образом задайте z-index для элемента (ов), который/появляется перед вашим меню, до небольшого числа (например, 1) и задает z-индекс для вашего контейнера меню немного выше номер (например, 2).

+0

Это на тестовом сервере, в котором я нуждаюсь в VPN, поэтому, к сожалению, нет. – Brad

+0

+1 для установки z-index – Element

+0

Это помогло мне: http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ Я установил #header, чтобы иметь z-индекс из 2 и #content, чтобы иметь z-индекс 1. – Brad

1

Я поставил #content г-индекс 1

и установите Z-индекс заголовка, который где выпадающие навигации расположена на 2.