jQuery UI modal dialog sliding behind dropdownlists in IE6

Question

I've just put the jQuery UI dialog into a web page. It's the first time I've used it. I thought I had set the bgiframe property correctly but when I check it in IE6 it's still slipping behind dropdownlists. Here's my javascript code. There's nothing flash on the page. A simple div with the text in and an anchor around some text for the 'jClick'. Any ideas why this is happening in IE6?

$(document).ready(function(){
    $("#dialog").dialog({
      bgiframe: true, autoOpen: false,
      overlay: { backgroundColor: '#000', opacity: 0 },
      width: 400,
      height: 200,
      modal: true,
      buttons: {
                'Delete all items in recycle bin': function() {
                    $(this).dialog('close');},
                Cancel: function() {$(this).dialog('close');}
            }
    });

    $("#jClick").click(function(event){
        $("#dialog").dialog('open');
        event.preventDefault();
    });

});

Answer 1

you need to use a jquery plugin, it's called bgiframe iirc. there you'll find explanation of the behavior you see.

Answer 2

You also need to include the bgiframe plugin js. It is not enough to set bgiframe to true. Maybe the ui should implement this itself as it is a silent dependency which fails without error, not sure I like it.

Get it here http://plugins.jquery.com/project/bgiframe