3

I'm facing one of the craziest problems I've ever found in css...

I have two CSS-jQuery horizontal dropdowns, one up and one below, displaying the drop-list when clicking on it.

The problem comes when I click the upper dropdown in IE6 and IE7, and absolute positioned element goes over relative positioned ones. Upper dropdown list (absolute) shows behing the dropdown (relative) below.

JavaScript:

$("button").click(function(e){
    $(".menu").hide();
    $(this).siblings(".menu").show();
    e.stopPropagation()
});
$(document).click(function(){$(".menu").hide()});

HTML:

<div class="top">
    <div class="dropdown">
        <button>Dropdown1 v</button>
        <div class="menu">
            <a href="#link">Option a</a>
            <a href="#link">Option b</a>
            <a href="#link">Option c</a>
        </div>
    </div>
    <div class="dropdown">
        <button>Dropdown2 v</button>
        <div class="menu">
             <a href="#link">Option d</a>
             <a href="#link">Option e</a>
            <a href="#link">Option f</a>
        </div>
    </div>
</div>

CSS:

.dropdown{float:left;display:inline;clear:left;position:relative}
.menu{position:absolute;left:0;top:22px;z-index:1}
.menu  a{display:block}

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0}

Here's the example:

http://jsfiddle.net/AEBaW/

SOLUTION HERE:

http://jsfiddle.net/AEBaW/2/

Kara
  • 6,115
  • 16
  • 50
  • 57
I.G. Pascual
  • 5,818
  • 5
  • 42
  • 58

2 Answers2

4

There is a known issue with z-index in IE. It treats z-index differently for absolute positioned elements than it does for relative positioned elements. It's like you have two sets of z-indexes. You might be able to fix it by using wrappers with the same positioning, if you cannot get all your elements to use the same positioning.

EDIT 1:

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

EDIT 2:

z index bug

Z-Index IE bug fix?

Internet Explorer z-index bug?

EDIT 3:

jQuery Solutions:

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/

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • i tried different workarounds from blogs and forums with no luck, if there is a hack, i'll appreciate – I.G. Pascual May 17 '11 at 16:27
  • @Nacho: If you already know it's the z-index bug, then you should have included all that information in your question. Otherwise, we're going to be suggesting all kinds of fixes you're not going to want. – Sparky May 17 '11 at 16:31
  • The fact is i can't know that, i've documented on the problem and there ARE workarounds, but those do not work for me – I.G. Pascual May 17 '11 at 16:35
  • @Nacho: It's the z-index bug. And you'd know that after reading about your problem in all the blogs & forums. See the link I posted within my answer. – Sparky May 17 '11 at 16:37
  • @Nacho: If not, I also added two links to jQuery solutions claiming to fix it. – Sparky May 17 '11 at 16:50
  • I posted the solution on the question, thanks for everything! – I.G. Pascual May 17 '11 at 16:57
0

When I had to work with IE z-index issues the best solution I found was making sure that every single container was part of the same stacking-index. Meaning, all elements act as layers of the same stack. That's usually what makes IE act funny.

You can do this by adding position:relative; z-index:auto; to all of the containers. You want to do this all the way up the line if possible. This should force IE to consider everything one stack, thus layering properly.

Caleb Irie
  • 358
  • 1
  • 8
  • The OP says he has both absolute and relative positioned items so he can't add "position:relative" to everything. – Sparky May 17 '11 at 16:39
  • It's only necessary to add `position:relative` when there isn't already a `position:` tag. By adding this to all the parent containers that **don't** have `position:` they will join the same stacking context. – Caleb Irie May 17 '11 at 16:44