Fix IE z-index bugs

This is (as I guess you found) very very normal. A limitation of the browser.
You are likely to find the same thing in activeX, Video and java plugins.
Solution is non-trivial. Good luck!

MS is giving us a really hard time with this kind of crap, why is the nicely described CSS specification to hard to read for them. The way I work around is now is displaying the blocks with the nice menus in it last. I'm using the ADC theme with the patch to have topblocks and footer. Originally the topblocks are send first to the output which makes in fact my menus disappear behind the right and left blocks (not the content since this was allready set to be outputted first). But after sending the topblocks as last block to the output the nice menus are nice :). In this configuration I still might have problems with nice menus in the right or left block getting under my bottomblock, sending bottomblocks to the output as first (after content) resolves this.

$output .= $content
$output .= $leftblocks ? "

\n" : "";
$output .= $rightblocks ? "

\n" : "";
$output .= $bottomtblocks ? "

\n" : "";
$output .= $topblocks ? "

\n" : "";

hope this helps some people out.

regards

Yes in deed.
According to bug reports I've read the select has nothing to do with it. It just has to do with IE restarting it's Z-index on top of previous divs when a new div is started and that new div uses position (whether absolute or relative). The simplest explication i found here, but as I tested using relative or positive positions give the same problem. The only solution I saw was or erasing all the positions, which off course wasn't possible, or put the div's I wanted on top as low as possible in the output of my template. Since CSS is so flexible you can always try it out and I hope it works out for you to.

with here I meant Here

Ok I was over-enthousiastic. I thought IE only had one z-index bug (silly me), when it comes to windowed controls like select boxes changing the order of the divs doesn't help. So you can disregard most of what I said unfortunately.

Thanks to dkruglyak. Your nice menu patch help me solve the problem!

#lgt {
z-index: 1000 !important;
position:relative;
}

Did it for me, where #lgt is the header div.

dkruglyak - just add these lines into your 'with' block and you should be pretty much set. Still flashes a little bit in IE, but it's at least usable now.

left = ul.offsetLeft + 'px';
top = ul.offsetTop + 'px';

Eh, full paste. zIndex helps with tinymce module overlap.

function addIFrame(node) {
node.style.zIndex = 200;
ul = node.lastChild;
h = ul.clientHeight;
w = ul.clientWidth;
var iframe = document.createElement('iframe');
with (iframe.style) {
position = 'absolute';
height = h + 'px';
width = w + 'px';
left = ul.offsetLeft + 'px';
top = ul.offsetTop + 'px';
border = '0';
}
node.appendChild(iframe);
}

Hi,

I'm having problems with the nice menus in IE as well and I have no idea of how to fix this issue. I tried to increase the z-index but that doens´t work at all and most of the other solutions posted here I don't understand.

Firefox e.g. works fine

Please have a look: Here

any suggestions?

A working (ish) nice_menus.js should be attached. I've added comments for '+2' and 'icons/blank.gif', which are bits of code that might not be needed for all installations, but are at least good to note.

I would like to see someone implement the fix from this page for Nice Menus

I con't know much about javascript but it seems like this could be added to the IEHoverPseudo function and with a little css tweaking all would be well

I think I love you Treylane, that fix worked perfectly for me.

Thank you, thank you, thank you!

got the same problem with jscalendar.
Anyone got a solution for that one.

Good fix,
I found one small bug, and can't see to find a work around. For me anyway, whenever my mouse cursor is over a menu item when the page loads, that menu will no longer drop down.

Anyone else seen this?

Ok, I fixed my problem by adding a check to the removeIFrame function. By loading the page with the mouse over the menu item, the IFRAME was never loaded for that item, then moving the mouse out of that item, was removing my UL tag. Regardless if you had the same problem.. It's probably a good idea to include this check.

  function removeIFrame(node) {
    iframe  = node.lastChild;

    /*** IFRAME CHECK ***/
    if(iframe.nodeName == "IFRAME") { 
      removeNode(iframe); 
    }
  }

Thank u paulstav416. You are right.

A dirty workaround is to add to page.tpl.php:

  <script>
    //http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
    if($.browser.msie&&parseInt($.browser.version)<=7){
        $(document).ready(function() {
        var zIndexNumber = 10000;
        $('div').each(function() {
          $(this).css('zIndex', zIndexNumber);
          zIndexNumber -= 10;
        });
      });
    }
  </script>

Reference: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

I was able to solve this issue by setting z-index on parent div.

This page describes the solution. Quite simple. Don't worry about setting z-index on the menu. Set it on the div that holds the menu.

http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/#comm...

Would be nice to add this to the FAQ!

ill make a tattoo with oda name ;)

it solves my problem with nicemenu and slideshow

thanks!!!