CODEWITHSUNDEEP
cssinternet-explorerwordpressdrop-down-menu
Baskets
Baskets

Reputation: 41

Dropdown menu hides behind other elements in IE

I have installed the Boldy theme from site5 on one of my projects and have run into one major problem.

When browsing in internet explorer (8 or lower), the top dropdown menu gets displayed behind some other elements (main content slider, H1's etc.). I've tried everything from changing all the z-index's to fixed positions, with no luck.

You can view the problem by visiting site5's Boldy demo page http://wordpress.site5.net/boldy/ and hovering over the top menu's blog tab in IE.

I have asked site5 to look into it, they are aware of the problem, but have failed to find any solutions.

Upvotes: 4

Views: 15459

Answers (4)

Mike Fitzpatrick
Mike Fitzpatrick

Reputation: 143

Ok originale solution here - Swiss credit website. This works but uses a complicated z-index solution. Here is very simple and improved solution here - Jeyjoo stock image gallery This works in IE6+, firefox, opera, safari and chrome

Solution

The 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>

The CSS

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

why it works

You have to tell IE how the two divs relate to one another.

Upvotes: 4

Mike Fitzpatrick
Mike Fitzpatrick

Reputation: 143

I see you still havent solved this on. I found a solution here on a submenu - Chkredit - swiss credit website Works in all versions of IE and is light and 100% CSS (no javascript).

Basically the problem was that IE does not use z-index correctly. Check the z-index's in the CSS code. Yo will need to put a z-index -1 on the items your menu is hiding behind.

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

Upvotes: 0

Moses
Moses

Reputation: 9183

If I'm not mistaken, IE is not properly inheriting the z-index from the top-nav for the children li items in the menu. That is why the Photos with a z-index of 60 are covering it up. You can do two things here.

  1. Eliminate the photo z-index.
  2. Directly specify a z-index of 100 for the sub list, not just the top-nav list.

Upvotes: 1

davidg
davidg

Reputation: 168

(not my script) Pretty sure i may have found the answer to this on here, but i cant find it. Either way, 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 the script can access the values.

kudos to whomever came up with this - saved me a whole lot of trouble.

Upvotes: 2

Related Questions