When using drop-down navigation like Son of Suckerfish, which entails placing absolute positioned layers above the content layer, Internet Explorer 6 displays once again really stupid behavior when it comes to HTML forms with the SELECT element. When the drop-down layer hovers above a form, the SELECT still shines through, it stays above it and cannot be convinced by z-index or any other CSS trick to go where it belongs.

Some solutions have been proposed, among them:

• hiding the select element on hover
• replacing it with an input element on hover
• or stop caring about IE6 altogether

These solutions all include drawbacks in usability or undesired UI changes, which can be confusing for the user. Another work-around, which is quite unnoticeable in the front-end is to place an invisible, empty IFRAME in the layer that will be positioned above the SELECT element.

Here’s how to do this jQuery-style:

The jQuery-Plugin:

jQuery.fn.activeXOverlap = function() { 

    $(this).each(function(i){
        var h   = $(this).outerHeight();
        var w   = $(this).outerWidth();
        var iframe  = ''
        $(this).prepend(iframe);
    });
}

The Plugin setup:

$(function() {
    $('.myHoverClass').activeXOverlap();
});

where .myHoverClass references all elements that should hover above the select.

The required CSS:

What this does is placing an Iframe behind every selected element, scaling it to the correct dimensions and hiding it from all browsers but IE6.