Nice Menu drop down disappearing behind nearby panel content in IE7+
eldesigner - August 12, 2009 - 21:48
| Project: | Nice Menus |
| Version: | 6.x-1.3 |
| Component: | Browser Compat |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Hi,
I'm using Nice Menus 6.x-1.3, panels, and quicktabs in close proximity and in IE the drop down menus are disappearing behind the other page elements.
I've tried applying
#nice-menu-1 * *{
z-index: 4 !important;
}It doesn't work, however, and I'm nearing a deployment deadline. Any ideas as to how to fix this would be greatly appreciated. Attached is a screenshot of the issue.
| Attachment | Size |
|---|---|
| error.JPG | 12.74 KB |
#1
Still have problems if you use "z-index:1000000;" ??? ;)
#2
Hi,
I am also getting the same problem in Ie 6/7/8. Dropdown menu hides behind image as well the text. So the problem is effectively with the whole panel.
I tried setting high value for z-index. But still getting same problem. Did anyone found solution for this?
Imran Khan
Project Manager
New Earth Marketing
#3
this problem is a known issue with IE and some theme settings
take a look at the FAQs http://drupal.org/node/195157
try a different theme to see if your theme is causing this
#4
I had the same problem. I read many articles and for my case the problem was that my menu was wrapped by a div which had a position relative (I found that later by looking at the other CSS of my theme). I just assigned a higher z-value for the wrapping div, and problem solved.
Assigning a high value to the menu itself did not work (li, ul). It worked with the div that wrapped the whole section, in my case the header section where my nice menu was contained.
#5
This also worked for me after trying the FAQ remedies.
I just used the "Display Element Info" tool in the FireFox Web Developer toolbar to get the full list of parent elements wrapping my nice menu, e.g.:
div #pagediv #header
div #top-nav
div #block-nice_menus-13 .block btype-nice_menus even
ul #nice-menu-1 .nice-menu nice-menu-down
li #menu-1863 .menuparent even last
I then tried adding
{ z-index: 1000 !important; }to each one, working from the bottom up. Once I added it to#header, the menu worked properly.IE is ridiculous.
#6
Thank You, #5
Hours wasted on this, I should have known to apply a z-index rule, but was trying to get the menu to float over Flash too (Monoslideshow), so thought it was a wmode : transparent problem with that. Sigh. My feelings towards IE a little stronger than 'ridiculous' right now, but that's nothing new.
I can calm down now, thank you.
#7
Happy to help. And to be clear, there's nothing rational about choosing "1000" for the z-index. I just used a huge number because I was in a rush and wanted to be damn sure the div was going to be at the top of the stack. You could (and probably should) use something like Firefox's web developer toolbar to pick a more rational z-index that's 1 larger than the highest one on the page.
#8
I have this problem with IE 7 but not IE 6. I am using Garland and I am not quite sure where I should add the { z-index: 1000 !important; }. Which file I need to modify?!
I am using 6x-2.0dev version of this module.
#9
I fixed this problem on my site by adding a conditional statement for IE7 with a position:static
The problem was with the div wrapping the menu.