2011-08-05 18 views
3

JQueryとCSS Tricksを使用していくつかの修正を試みましたが、ドロップダウンメニューをIE7のアコーディオンスライダの上に重ねて表示することができません。それは他のどのWebブラウザでもうまくいくようです。どんな助けでも大歓迎です。IE7 Z-インデックス問題(CSSドロップダウン)

コードスニペット::

HTML

<div class="shell"> 
<div class="border"> 
     <div id="header"> 
      <h1 id="logo"><img src="" class="logo" /></h1> 

      <div class="cl">&nbsp;</div> 
     </div> 
     <div id="nav">  
      <ul class="menu"> 
       <li class="current_page_item"><a href="index.php?selected=1">Home</a></li> 
       <li ><a href="#">Applications</a> 
        <ul class="sub-menu"> 
         <li><a href="#">Sub1</a></li> 
         <li><a href="#">Sub2</a></li> 
         <li><a href="#">Sub3</a></li> 
        </ul> 
       </li> 
       <li ><a href="#">Products</a> 
        <ul class="sub-menu"> 
         <li><a href="#">Sub1</a></li> 
         <li><a href="#">Sub2</a></li> 
         <li><a href="#">Sub3</a></li> 
         <li><a href="#">Sub4</a></li> 
        </ul> 
       </li> 
       <li ><a href="#">News/Media</a></li> 
       <li ><a href="#">About Us</a></li> 
       <li ><a href="#">Contact</a></li> 
      </ul> 
     </div><!--end nav-->  
<div id="accordion-1"> 
    <dl> 
     <dt>Slide 1</dt> 
      <dd> 
       <h2><img src="images/accordian/efficacy.jpg" />Slide 1</h2> 
       <p>Slide 1</p> 
      </dd> 
     <dt>Slide 2</dt> 
      <dd> 
       <h2><img src="images/accordian/accuracy.jpg" />Slide 2</h2> 
       <p>Slide2</p> 
      </dd> 
     <dt>Slide 3</dt> 
      <dd> 
       <h2><img src="images/accordian/cost.jpg" />Slide 3</h2> 
       <p>Slide 3 </p> 
      </dd> 
    </dl> 
</div> 

CSS

/* --------- */ 
/* -- Nav -- */ 
/* --------- */ 
#nav { height:43px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; } 
.menu { padding: 7px 6px 0 0; } 
.menu li { margin: 0 5px; float: left; list-style:none; position:relative; border-right: 1px solid #DBDBDB; } 
.menu a { display: block; padding: 8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 15px; } 
.menu .current a, .menu li:hover > a { color: #CA9800; } 
.menu ul li:hover a, .menu li:hover li a { color: #555; } 
.menu ul a:hover { background: #CA9800 !important; color: #fff !important; } 
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; border: solid 1px #ddd; z-index:9000 !important; } 
.menu li:hover > ul { display: block; } 
.menu ul li { float: none; margin: 0; padding: 0; } 
.menu ul a { font-size: 14px; } 
.menu ul ul { left: 250px; top: -3px; } 
.menu li.current_page_item a { color: #CA9800; } 
.menu .sub-menu li.current_page_item a { color: #CA9800; } 

/* --------------- */ 
/* -- ACCORDIAN -- */ 
/* --------------- */ 

/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */ 

.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} 
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0} 
.easy-accordion dt,.easy-accordion dd{position:absolute} 
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} 
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden} 
.easy-accordion dd.active{opacity:1;} 
.easy-accordion dd.no-more-active{z-index:2;opacity:1} 
.easy-accordion dd.active{z-index:3} 
.easy-accordion dd.plus{z-index:4} 
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);} 


/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */ 

dd p{line-height:120%} 

#accordion-1{width:800px;height:245px;padding:20px;background:#fff;margin:0 0 0 60px; z-index:1;} 
#accordion-1 dl{width:800px;height:245px} 
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: arial, sans-serif; text-transform:uppercase;letter-spacing:1px;background:#fff url(../images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#BF8530} 
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(../images/slide-active.jpg) 0 0 no-repeat} 
#accordion-1 dt.hover{color:#BF8530;} 
#accordion-1 dt.active.hover{color:#fff} 
#accordion-1 dd{padding:25px;background:url(../images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px} 
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold} 
#accordion-1 .active .slide-number{color:#fff;} 
#accordion-1 a{color:#BF8530} 
#accordion-1 dd img{float:right;margin:0 0 0 30px;} 
#accordion-1 h2{font-size:2.5em;margin-top:10px} 
#accordion-1 .more{padding-top:10px;display:block} 
+0

おそらく、質問内にCSSとHTMLの関連部分を投稿することができます。 – Sparky

答えて

2

落ちている部分にposition:relative;を追加するとよいでしょう。 thisによれば、通常あなたの問題を解決します。

+0

あなたはまたこれを見たいと思うかもしれません:http://stackoverflow.com/questions/1287439/ie7-z-index-problem –

+0

位置を追加する:アコーディオンdivに相対的な問題を解決したようだった。 – Will

2

IE 7のzインデックスを持つ既知の問題これは、zインデックスを扱いますがあります絶対配置された要素の場合と相対的に配置された要素の場合とは異なります。 2つのz-インデックスセットがあるようです。すべての要素が同じ位置を使用することができない場合は、同じ配置でラッパーを使用して修正することができます。

z-index bug threads

Z-Index IE bug fix?

Internet Explorer z-index bug?

jQueryのソリューション:

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

+0

それらのうちのいくつかを試してみましたが、おそらく私はそれを正しく実装していません。これらの他のリンクのいくつかを見ていきます。ありがとう。 – Will

関連する問題