Member Avatar for creativeideas

Simply show hide div Using css.. a popdiv visible when hover on download link same with other links. but in ie7 there is some Z-index problem

My code is below (please be kind, I know I'm not very good at this), any help is appreciated.
`<table width="100%" border="0" cellspacing="0" cellpadding="0" class="product_resulttable">

  <tr>
    <td><div class="imgbox"></div></td>
    <td>DMC-ZS19K<br />

   Manual pics</td>
    <td>03 Oct,2012</td>
    <td>25,500</td>
    <td><div class="actionlist">
    <ul class="dott">
    <li><a href="#">Download</a>

    <div class="popup_div">
       first block
    </div>

    </li>
      <li><a href="#">Add to Basket</a>
       <div class="popup_div">
      second block
    </div>


      </li>
        <li><a href="#">Share</a></li>
    </ul>


    </div></td>
  </tr>
 </table>`

css:

  .actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px;    width:132px;  padding:8px 0 }
      .dott { list-style:none;  background:yellow }
   .dott li { display:block;position:relative }
   .dott li a { display:block; padding:2px 9px; color:#454545; font-size:11px; }
      .popup_div{position:absolute; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }
     div.actionlist ul li:hover > div.popup_div { display:block; }

here is jsfiddle link: http://jsfiddle.net/hjx5y/12/

  • 3 Contributors
  • 2 Replies
  • 378 Views
  • 37 Minutes Discussion Span
  • Latest Post Latest Post by code739

Dani AI

Generated

— IE7 is simply getting tripped up by stacking contexts. and are on the right track: this is a z-index/positioning issue rather than a bug in :hover. Two reliable approaches follow: a pure-CSS stacking-context fix, and a robust JS fallback that escapes table/td stacking contexts entirely.

Add a positioned stacking context on the popup's immediate wrapper and keep the popup itself absolutely positioned above it. Example (use these patterns with the thread's .actionlist/.popup_div names):

/* make the wrapper establish a stacking context */
.popup-anchor { position: relative; z-index: 1; }

/* popup sits above everything inside that context */
.popup-layer { position: absolute; z-index: 10000; top: 100%; left: 0; }

If that does not help, the popup is likely trapped by a higher ancestor (table/td) that already forms its own stacking context. Either give that ancestor a controlled z-index/position or use the JS approach below.

Detach the popup from the table and position it at body-level on hover (avoids ancestor stacking issues):

$(document).on('mouseenter', '.menu li', function(){
  var $p = $(this).find('.popup').appendTo('body').show();
  var o = $(this).offset();
  $p.css({ position: 'absolute', left: o.left, top: o.top + $(this).outerHeight() });
}).on('mouseleave', '.menu li', function(){
  $('body').find('.popup').hide().appendTo(this);
});

Troubleshooting notes: temporarily give ancestors visible backgrounds and distinct z-index values to see which element is forming the blocking stacking context. As an IE7-specific tweak, forcing hasLayout (for example zoom:1) on a parent sometimes changes behavior, but appending the popup to body is the most reliable cross-browser fix.

Recommended Answers

All 2 Replies

Member Avatar for Member #949455

Simply show hide div Using css.. a popdiv visible when hover on download link same with other links. but in ie7 there is some Z-index problem

Read this regarding about z-index:

http://www.w3.org/TR/CSS21/visuren.html#z-index

Read this and used this snippet:

or also read this and used this snippet too:

http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Member Avatar for code739

z-index is not an absolute measurement, where your specifying z-index your specifying relative
heres: your updated code but it has a lil move

     .actionlist { background:#e6eaf6; border:1px solid #d9e0f4; border-radius:5px; width:132px; padding:8px 0 }
.dott { list-style:none; background:yellow }
.dott li{ height:20px;}
    .dott li a { padding:2px 9px; color:#454545; font-size:11px; }
    .popup_div{position:relative; z-index:9999; background:#f5f6fb; width:140px; border:1px solid #c2d0eb; min-height:140px; left:-5px; display:none }
    div.actionlist ul li:hover > div.popup_div { display:block; }
commented: thnks a ton ! u save my day +0
commented: Nice work! +9
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.