CSS z-index broken in IE7

I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:

<div class="inner">
  <ul>
    <li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
      <img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
      Asthma, 
      <small id="year5661">1974</small> 
      <div class="mouseover-bubble orange" id="bubble_5661" style="display:none;"> 
        <h6>Asthma</h6> 
        <div class="definition">                               
          <p>A form of bronchial disorder....</p>
        </div>
      </div>
    </li>
  </ul>
</div>

Here is the relevant CSS:

div.mouseover-bubble {
  position: absolute;
  width: 360px;
  left: 10px;
  bottom: 10px;
  z-index: 10000; 
}

As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".

In this case I can't use position:relative because it then pushes all the content down when it displays. As for the parent's z-index, which tag represents the parent in this case? Because I have tried setting the z-index to 10001 on the "li" tag, the "ul" tag, and the "div class=inner" tag, and nothing changes.

SenorPuerco 2010-08-20 19:16:44

damn.. the parent should be the li tag, if it doesnt change anything, then i run out of ideas... btw i used this page when i had that problem http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7your li has position:relative?

pleasedontbelong 2010-08-20 19:28:40

Well, I'll keep trying to mess with the position: and z-index: values on the div and the parent. I guess I was hoping someone would know of a secret IE bug that kicks in when you define a top: value. Thanks anyway.

SenorPuerco 2010-08-20 19:38:57

ansaurus

tags:

views:

answers:

CSS z-index broken in IE7

related questions