слайдер nivo и выпадающее меню не работают в IE - PullRequest
1 голос
/ 23 декабря 2010

У кого-нибудь есть идеи, почему выпадающее меню в IE исчезает под слайдером nivo? пытался играть с z-index, не помогло, я также знаю, что выпадающие меню исчезают под флэш-контентом, но это не так (wmode = transparent), насколько я знаю, слайдер nivo использует только jquery, без flash .

вот HTML:

<table>
<tr height="50"><td colspan="2" align="right" class="bottom_menu">
<ul id="nav" class="dropdown dropdown-horizontal" >
                                             <li><a href="/index.cfm?fuseaction=home.logout" class="dir" style="border:0 !important;" >Çikis</a></li>   
                                             <li><a href="/index.cfm?fuseaction=objects2.list_basket" class="dir">Sepetim</a></li>
                                             <li><a href="/index.cfm?fuseaction=objects2.me" class="dir">Sirketim</a>
                                                <ul>
                                                 <li><a href="/index.cfm?fuseaction=objects2.list_opportunities">Firsatlar</a></li>
                                                 <li><a href="/index.cfm?fuseaction=objects2.form_add_partner">Sirkete Kullanici Ekle</a></li>
                                                 <li><a href="/index.cfm?fuseaction=objects2.form_upd_my_company">Kullanici Yönetimi</a></li>
                                                 <li><a href="/index.cfm?fuseaction=objects2.list_analyses">Analizler</a></li>
                                                 <li><a href="/index.cfm?fuseaction=objects2.list_extre">Hesap Ekstresi</a></li>
                                                 <li><a href="/index.cfm?fuseaction=objects2.popup_add_online_pos" target="_blank">Sanal Pos</a></li>
                                                </ul>
                                             </li>
                                            </ul>
                                        </td></tr>
                                    </table>

<div id="banner">
    <img src="/documents/templates/projedepo/l_top.gif" style="z-index:1;position:absolute; left:0; top:0;" width="24px" height="24px" border="0" />
    <img src="/documents/templates/projedepo/r_top.gif" style="z-index:1;position:absolute; right:0; top:0;" width="24px" height="24px" border="0" />
    <img src="/documents/templates/projedepo/l_bottom.gif" style="z-index:1;position:absolute; left:0; bottom:0;" width="24px" height="24px" border="0" />
    <img src="/documents/templates/projedepo/r_bottom.gif" style="z-index:1;position:absolute; right:0; bottom:0;" width="24px" height="24px" border="0" />

    <div class="banner_img">
    <link rel="stylesheet" href="/documents/templates/projedepo/banner/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/documents/templates/projedepo/banner/style.css" type="text/css" media="screen" />

    <div id="slider" class="nivoSlider">
        <img title="#1" src="/documents/templates/projedepo/banner/canon.jpg" alt="" />
        <img title="#2" src="/documents/templates/projedepo/banner/indigovision.jpg" alt="" />
    </div>
    <div id="1" class="nivo-html-caption">
        <a href="/index.cfm?fuseaction=objects2.detail_product&product_id=612&stock_id=612"><img src="/documents/templates/projedepo/banner/daha_fazlasi.jpg" border="0" /></a>
    </div>
    <div id="2" class="nivo-html-caption">
        <a href="/index.cfm?fuseaction=objects2.detail_product&product_id=630&stock_id=630"><img src="/documents/templates/projedepo/banner/daha_fazlasi.jpg" border="0" /></a>
    </div>

    <script type="text/javascript" src="/JS/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:1000, //Slide transition speed
        pauseTime:10000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:1.0, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //Triggers after all slides have been shown
        lastSlide: function(){}, //Triggers when last slide is shown
        afterLoad: function(){} //Triggers when slider has loaded
        });
    });
    </script>
    </div>
</div>

Вот css для выпадающего меню:

http://www.micae.com/documents/templates/projedepo/default.css

http://www.micae.com/documents/templates/projedepo/default.advanced.css

http://www.micae.com/documents/templates/projedepo/dropdown.css

и для слайдера nivo:

http://www.micae.com/documents/templates/projedepo/banner/style.css

http://www.micae.com/documents/templates/projedepo/banner/nivo-slider.css

и для баннеров:

#banner { position:relative; width:980px; height:435px; background:#fff; margin-bottom:20px; margin-top:-1px; color:#000; z-index:60; }
.banner_img { padding:8px;position:absolute;z-index:2; }

и javascript по умолчанию, слайдер jquery и nivo

http://www.micae.com/JS/jquery.nivo.slider.pack.js

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

Ответы [ 2 ]

2 голосов
/ 23 декабря 2010

IE может сойти с ума по z-index, особенно когда элементы не расположены. Убедитесь, что элементы неисправности и все их предки размещены в относительном или абсолютном порядке прямо в вашем CSS. Кажется, что совершенно новый порядок стеков создается, как только где-то происходит разрыв в цепочке.

лично, у меня всегда есть что-то подобное в моем css по умолчанию:

div, ul, li {position:relative;}

Кажется, это решает много проблем.

1 голос
/ 05 июля 2011

У меня была такая же проблема. Просто убедитесь, что вы установили все элементы в своем раскрывающемся css, чтобы они имели очень высокие z-индексы и явное позиционирование (например, убедитесь, что вы указали для каждого - относительный-абсолютный-и т. Д.). Для меня проблема произошла только в IE, а не в Firefox или Chrome, но изменение этих значений (z-index> 300+) решило проблему для меня. Надеюсь, это поможет вам, удачи!

...