bgiframe with jQuery UI 1.8.9 Dialog and jQuery 1.5

Question

So I am using jQuery UI's dialog box. But as I have a read there is a common bug within IE6 (which is unfortunate that I have to make sure this works for) where dropdown lists do not pay attention to z-index queues. I have also read that there is a handy plugin out there called bgiframe to take care of my overlay woes. I have found 2 different ways people say to use it, and neither work. I may just be doing something really stupid but I need to get this working.

including jQuery.bgiframe.js Version 2.1.1 Here are the 2 ways I have attempted to use it without working: (I have included all jQuery-UI, jQuery, and bgiframe in the page that I am working on)

1. The documentation from the actual plugin says do this:

   $("#selectDropdownThatNeedsFixing").bgiframe();
   

   This cause a jQuery exception saying saying Object expected.

2. The second way that I saw from the following page: http://docs.jquery.com/UI/Dialog/dialog basically you just set bgiframe: true when you initialize the dialog:

   $( ".selector" ).dialog({ bgiframe: true });
   

This does not error out, but the problem still exists within IE6 when I test it out.

Am I missing something? Which way am I supposed to use bgiframe? Any direction would be much appreciated. Thank you for your help!

Answer 1

You don't need to use a plugin for this. The problem with IE6 and z-index is, positioned elements in IE6 generate a new stacking context starting with a z-index value of 0. Therefore z-index doesn’t work correctly in IE6. The workaround to this issue is to specify a z-index value in the parent selector that is equal to the z-index specified in the child selector.

Check working example at http://jsfiddle.net/ebgnu/2/

Below is the example i did in jsfiddle.

.parent{
    position: relative;
    color:white;
}
.parent#a {
    height: 2em;
    z-index: 1;
}
.parent#a .child{
    position: absolute;
    height: 6em;
    width: 2em;
    z-index: 1;
    background:blue;
}
.parent#b {
    height: 2em;
    background:red;
}

<div class="parent" id="a">
    <div class="child">a</div>
</div>
<div class="parent" id="b">
    <div class="child">b</div>
</div>

Look at .parent#a This is the parent of the child selector a that have a z-index of 1. In this example, a will be on top of b. let's say we want to make b on top on a. All we need to do is change values of both the child a and it's parent to z-index: 0. This will send it to the back.