Question

Hey so I have this case where if a page contains text and text contains a UL list with some items, those LI items will overlap the items in dropdown then the user slides down the dropdown.

I thought I had it fixed by adding the following to Div around my dropdown.

position:relative; z-index:999999;

Giving me

#source-programs-dd { overflow: auto; background: #fff; max-height: 198px; position:relative; z-index:999999;}

And it works everywhere except for IE7 Any ideas ?

Answer 1

To help directly solve your question, I’ll need to see your HTML and CSS. But in general IE7 has a known issue with z-index and how it calculates z-index for children elements.

There are several Stackoverflow questions around this issue. Here are some that could help:

IE7 Z-Index issue – Context Menu

expanding the menu appearing underneath the gallery in IE7

The general idea is that in IE7, z-index is calculated at the parent element of siblings. That sounds a little odd so here’s an example:

<div id="parent1">...</div>
<div id="parent2">...</div>

If .parent1 has something like a UL menu that overlaps .parent2, it could be possible that .parent2 appears in front of that content no matter what z-index any child element of .parent1 has.

This is because IE7 compares the z-index of .parent1 and .parent2 and will make all children elements inherit their value, in a sense. (child elements actually get their own z-index context related to each other. But children of other parent elements are influenced by their parent first, in relation to child of other parents)

The solution is to find the 2 elements that are causing the problem and find where they share parent elements that are siblings of each other.

Then apply proper z-index on those elements.

.parent1{ z-index:10; }
.parent2{ z-index:1; }

If you post your HTML I can try to help find your exact issue.

Cheers!