Jquery Superfish problem in IE7

Question

only in IE7 the submenu appear under my page's content. I use bgframe plugin.

Here my code: $("ul.sf-menu").superfish({ speed: 'fast', autoArrows: false // disable generation of arrow mark-up }).find('ul').bgIframe({opacity:false});

Do you have any ideas?

Thank you very much. Bye Z

Answer 1

It is indeed a CSS problem, and a very irritating one to fix.

Most likely you've got a position:relative or position:absolute rule on one of your container elements, or are using another JS plugin that messes with the position (such as a jquery.corner). Look around for something like that.

Answer 2

Set the parent container to z-index:1 and the .sf-menu to something like z-index:100

This will set the layers and make the menu popup over the website content.

Answer 3

You may find this little chunk of code helpful, it does deep voodoo with the Z-Order. I did not create it, but it has saved me countless hours.

One way to fix many of the issues with IE7 is to dynamically reverse the default z-index stacking order of the elements on your page. This will ensure the elements higher in your HTML source will also have a higher z-index order on your page, solving most of the IE stacking issues. If you’re using jQuery (the best Javascript library there is), here’s the quick fix...

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

You can find it all here...

Answer 4

This sounds like a css problem, probably not anything to do with your implementation of superfish. Try using the IE Developer Toolbar to inspect the menu and see what combination of things is causing it to appear down there.

Answer 5

The z-index fix mentioned above saved me from ripping off my own scalp. I put it in an IE7-specific conditional comment, and all is well again.