JQuery UI datepicker not sitting over dropdowns in IE 6

Question

For some reason our datepicker is falling behind the dropdowns below it in IE6

www.senegal.co.uk

Every search I have done seems to suggest the datepicker should deal with this.

We do have the following css in place:

.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

I have tried adding bgiframe and calling:

$("#ui-datepicker-div").bgIframe();

But it doesn't solve the issue.

Any ideas?

I'm thinking we're going to need someone with experience using jquery ui datepicker to help us out on this one!

Answer 1

Wouldn't z-index: -1 send the layer to the back of the stack thus putting it under the form element?

I think you may need a positive value.

Answer 2

You definitely need BGIFrame - http://docs.jquery.com/Plugins/bgiframe

Answer 3

The quickest and easiest way around this would be to use the BGIFrame plugin which should get around your issue with IE6.

Answer 4

The problem is a z-index bug with IE6. I have seen this issue before but never had to use it with jQuery. Here are a couple of links to help you out in the right direction.

Link1 Link2

Answer 5

Couldn't find a solution to this in time, so in the end just put in some code to hide the dropdowns

beforeShow: function() {
    $('.searchPanelGroup6').css('visibility', 'hidden');
},
onClose: function() {
    $('.searchPanelGroup6').css('visibility', 'visible');
}

Answer 6

we're not using explicit positioning that much, so for me it recently worked to apply the following style directly to the selects/ dropdown elements that wouldn't hide below a datepicker:

zoom: -1; position: relative;

(oh, and it was applied in a separate style sheet which is used only for ms ie 6...)

Answer 7

try $("#datepickerid").bgiframe();

The bgiframe plugin is available at http://docs.jquery.com/Plugins/bgiframe

It's used by the jQuery UI team in most places where they have such an issue.

Hope it works for you too.