Dropdown menu hides behind other IE elements

Question

I installed the Boldy theme from site5 in one of my projects and ran into one serious problem.

When viewed in Internet Explorer (8 or lower), the top drop-down menu is displayed behind some other elements (main content slider, H1, etc.). I tried everything to change all z-index to fixed positions, with no luck.

You can view this issue by visiting the site5 Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the blog tab in IE.

I asked site5 to study it, they know about the problem, but did not find a solution.

Answer 1

Here you will find the original solution - a Swiss credit site . This works, but uses the sophisticated z-index solution. Here's a very simple and improved solution - Jeyjoo Image Gallery This works in IE6 +, firefox, opera, safari and chrome

Decision

HTML

<div id="container_page" class="container_page"> <div id="container_header" class="container_header"> NAV BAR GOES HERE </div> <div id="container_body" class="container_body"> ...body text... </div> </div> 

CSS

 #container_page #container_header {position:relative;z-index:2;} #container_page #container_body {position:relative;} 

why does he work

You have to tell IE how the two divs are related to each other.

Answer 2

(not my script) Pretty sure I found the answer to this question here, but I can not find it. Anyway, this worked great for me ...

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

just make sure your css includes position and z-index so that the script can access the values.

Kudos to the one who came up with this saved me a lot of trouble.

Answer 3

If I am not mistaken, IE does not inherit the z-index from the top level for children li elements in the menu. That's why photos with z-index 60 cover it. Here you can do two things.

• Eliminate the z-index of the photo.
• Directly specify the z-index of 100 for the sub list, not just the top-level list.

Answer 4

I see that you still haven't decided this. I found a solution here in the submenu - Chkredit - Swiss Credit Website Works in all versions of IE and is lightweight and 100% CSS (without javascript).

Basically the problem was that IE is not using z-index correctly. Check the z-index in CSS code. Yo will need to put z-index -1 on the items that your menu hides.

I am working on the same issue for my own image gallery right now (go to the "top image" page) - jeyjoo image gallery