Nice Menus renders drop-down menus behind Marinelli elements in IE7
archer007 - July 9, 2008 - 19:56
| Project: | Marinelli |
| Version: | 6.x-1.8 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
I am using IE 7.0.5730.13, and Nice Menus (NM) renders menus behind the front page banner of my site, which uses the Marinelli template. Nice Menus works works with Firefox 3 and Safari, but is buggy in IE7 now for some reason. The site is on a development machine right now, but here's a screenshot:
http://s49.photobucket.com/albums/f272/linuxarcher/?action=view¤t=...
Look under "Technology Support" and you'll see NM trying to render the menu (my mouse was on the "Technology Support" tab) Nice Menus supposedly has issues with the overflow:hidden CSS property, so I thought I'd post a bug here and see if anyone has ideas on how to make Nice Menus work with Marinelli or even make a Nice Menus-friendly version of Marinelli.
#1
hi!
It seems a z-index issue to me:
try adding z-index declaration to both elements, for example:
#header {padding: 0;
margin: 0;
height: 180px;
background: #000033 url(img/banners/rotate.php) no-repeat 0px 0px; /*rotates images in the banners folder */
position:relative;
z-index:0;
}
than add a greater z-index to your menu elements for example
#yourmenu ul li {z-index:2;
}
let me know if this solution works for you!
#2
I'll let you know what happens.
#3
Where do you add this? I have a similar problem and I know I need to change the z-index, but where do I put this code? and what should I put in place of the "#" sign?
#4
The problem is the z-index of the containing element, which, in the case of Nice menus, is 'Block'. If the theme has a low z-index on the block, anything that is contained within that block will inherit that value and the z-index will only apply to elements placed within the containing element. However, this depends on the 'position' attribute of the elements.
Nice menus actually has the right z-index, but it is in a Block, which, in my theme, at least, has a z-index of zero, which is less than the z-index of 1 that the page has. I believe this is meant to allow page content to be placed "on top" of block content if there is ever any page content that expands.
The fix is to find the style.css file and place this in the bottom:
.Block{z-index:10;
}
Or, place whatever z-index value you want, as long as it is higher than 1.