asked on

ie7 z-index issue with drop-down menu

I have a drop down menu that displays over an iframe. The iframe is nested on the page, so the drop down properly displays over it. The problem is that any link elements on the iframe are active through the drop down menu. For example, when I mouse over and activate the drop down, then mouse over the drop down elements and happen to mouse over a part that has a link on the iframe beneath, the dropdown menu recoils.

I have tried raising the z-index and lowering the one on the iframe to no avail.

Here is the drop down code which sits on the main page.
 
<style type="text/css">
/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/pro_drop_1.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */
 
.preload1 {background: url(jquery/plugins/pro_drop_down_1/blank_over.gif);}
.preload2 {background: url(jquery/plugins/pro_drop_down_1/blank_overa.gif);}
 
#nav {padding:0; margin:0; list-style:none; height:28px; background:#C8D5FF; position:relative; z-index:2500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:28px; line-height:27px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:28px;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:28px;}
#nav li a.top_link_logo {display:block; float:left; height:28px; line-height:27px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
#nav li a.top_link_logo span {float:left; display:block; padding:2px 12px 0 5px; height:28px;}
#nav li a.top_link:hover {color:#000;}
#nav li a.top_link:hover span {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
 
#nav li:hover > a.top_link {color:#000; background: url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(jquery/plugins/pro_drop_down_1/spacer.gif) no-repeat right top;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:3300;}
 
/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; text-align:left; z-index:3300;}
 
#nav li:hover ul.sub
{left:0; top:26px; background: #DBDBDB; padding:3px; border:2px solid #E9E9E9; white-space:nowrap; height:auto; z-index:3300; filter:alpha(opacity=75); opacity:.750; -moz-opacity:.750; -khtml-opacity:0.75;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:100%; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90%; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff;}
#nav li:hover ul.sub li a:hover 
{background:#E9E9E9; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#E9E9E9; color:#fff;}
 
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(jquery/plugins/pro_drop_down_1/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #DBDBDB; padding:3px; border:1px solid #E9E9E9; white-space:nowrap; z-index:3300; height:auto;}
 
</style>
 
 
<div align="center" id="topcorner" style="background-color:#C8D5FF">
	<ul id="nav" style="width:1000px">
		<li class="top"><a class="top_link_logo" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_main.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span><img src="images/logo_fabuso.jpg" border="0"></span></a></li>
 
		<li class="top"><a class="top_link" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_news.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Tools</span></a>
			<ul class="sub" style="width:150px">
				<li><a href="<%= response.encodeURL("FabsitesSiteServlet?action=&success=m1_fabsites_landing.jsp&error="+ request.getServletPath() ) %>"><font color="333333">Instant Sites</font></a></li>
				<li><a href="<%= response.encodeURL("FabsitesSiteServlet?action=&success=m1_fabsites_landing.jsp&error="+ request.getServletPath() ) %>"><font color="333333">Instant Sites</font></a></li>
			</ul>
		</li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("RedirectServlet?action=&success=m1_resources.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Resources</span></a>
			<ul class="sub" style="width:115px">
				<li><a href="<%= response.encodeURL("RedirectServlet?action=&success=m1_resources.jsp&error="+ request.getServletPath() ) %>"><font color="333333">All</font></a></li>
			</ul>
		</li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("GivGetResourcesServlet?action=&success=m1_my_account.jsp&error="+ request.getServletPath() ) %>" target="_parent"><span>Account</span></a></li>
		<li class="top"><a class="top_link" href="javascript:popUp('../livechat/client.php')"><span>Live Support</span></a></li>
		<li class="top"><a class="top_link" href="<%= response.encodeURL("LogoffServlet?action=&success=index.jsp&error="+ request.getServletPath()) %>" target="_parent"><span>Logout</span></a></li>
	</ul>
</div>
 
 
 
 
Here is the iframe code that sits below it.  The links in the iframe are the ones that are causing the problems mentioned above.
 
<style type="text/css">
* {padding:0; margin:0}
#sitenavcontainer{    
width:100%;
height:100%;
vertical-align:top;
top:0;
left:0;
padding-left:1px;
position:relative;
z-index:-1;
}
.sitenavleftcontainer{    
width:350px;
height:100%;
top:0;
left:0;
padding-left:10px;
position:absolute;
overflow:hidden;
z-index:-1;
}
.sitenavtitle{    
position:absolute;
left:100px;
top:0;
padding-top:5px;
width:240px;
overflow:hidden;
white-space:nowrap;
max-height:25px;
z-index:-1;
}
.sitenavrightcontainer{    
width:650px;
text-align:left;
float:right;
z-index:-1;
}
.sitenavlinkstext {font-family: Geneva, Arial, Helvetica, sans-serif; margin-left:15px; color:#006FB5; font-size: 11px; font-weight:normal}
a.sitenavlinkstext {text-decoration:none; cursor:pointer;}
a.sitenavlinkstext:hover {text-decoration:underline; cursor:pointer;}
</style>
 
<div id="roundrow" style="background-color:#DFE7FF; height:25px; border-right-width:1px; border-right-color:#CCCCCC; border-right-style:solid; border-left-width:1px; border-left-color:#CCCCCC; border-left-style:solid; border-top-width:1px; border-top-color:#CCCCCC; border-top-style:solid; ">
<div id="sitenavcontainer">
   <div class="sitenavleftcontainer">
	 <div class="sitenavtitle"><span class="sitenavlinkstext"><%= ResponseBean.getFabsitesSiteTitle(0) %></span>
	 </div>
   </div>
   <div class="sitenavrightcontainer">
<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="<%= response.encodeURL("Site?alias="+ResponseBean.getFabsitesSiteAlias(0)) %>">Preview Site</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="<%= response.encodeURL("FabsitesSiteEditServlet?action=&success=m1_fabsites_name.jsp&error=m1_fabsites_landing.jsp&fabsites_site_id=" + ResponseBean.getFabsitesSiteID(0)) %>">Site Name</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="<%= response.encodeURL("FabsitesSiteEditServlet?action=&success=m1_fabsites_design.jsp&error=m1_fabsites_landing.jsp&version=edit&fabsites_site_id=" + ResponseBean.getFabsitesSiteID(0)+"&fabsites_page_id="+fabsites_page_id) %>">Site Design</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="<%= response.encodeURL("FabsitesSiteEditServlet?action=&success=m1_fabsites_link.jsp&error=m1_fabsites_landing.jsp&version=link&fabsites_site_id=" + ResponseBean.getFabsitesSiteID(0)) %>">Site Links</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="../catalog/admin">Site Sales</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_edit" onClick="window.open(this.href, this.target)" href="<%= response.encodeURL("FabsitesSiteEditServlet?action=&success=m1_fabsites_stats.jsp&error=m1_fabsites_landing.jsp&fabsites_site_id=" + ResponseBean.getFabsitesSiteID(0)) %>">Site Stats</a>
&nbsp;<a class="sitenavlinkstext" target="iframe_i_contain" onClick="doBothadd();" href="<%= response.encodeURL("FabsitesSiteEditServlet?action=&success=m1_fabsites_design.jsp&error=m1_fabsites_landing.jsp&version=add&fabsites_site_id=" + ResponseBean.getFabsitesSiteID(0)) %>">Add New Site</a>
&nbsp;<a class="sitenavlinkstext" href="#" target="_top" onClick="showPopUp('dialog');">Delete This Site</a>
 
   </div>
</div>
</div>
 
</body>
</html>

Open in new window

prokvk

In IE the iFrames, select elements ... are objects handled by the OS, not the browser .. So you can't fix this by x-indexing .. It's a known issue, you can for example hide your iFrame on DropDown activation, or place your dropped menu content into another iFrame. I know, it's freaking ugly, but there is no good solution for this. You know - IE ...

Shaye Larsen

ASKER

Thanks. Can you give me an example of how to hide the iframe on DropDown activation? Is it something like.

iframe[iframe_i_nav].style.display = 'none';

Then just adjust the onMouseOver and onMouseOut events?

ie: onMouseOver="iframe[iframe_i_nav].style.display = 'none';"

Tried that and it doesn't work. Not sure about syntax.

prokvk

I can't give you better advice than:

Go jQuery ...

http://jquery.com/

I don't know many web developers, but those I know which went jQuery never went back .. You can download this JS library from the link above, just include it on your page and then the code for hiding the iframe would be:

<script type="text/javascript">
        $(function () {
            //let's say your menu is: ul#menu
            //let's say your iframe is: iframe#ifr
            
            $('ul#menu').hover(function () {
                $('iframe#ifr').hide();
            },function () {
                $('iframe#ifr').show();
            });
        });
    </script>

Open in new window

Shaye Larsen

ASKER

Thanks for your comment. I don't need to hide the layer underneath, I just need to make it so the links on the underneath table don't bleed through the drop down menu.

prokvk

That's what I'm trying to tell you .. They will, in IE - iFrame WILL be on top disregard of positioning and z-indexing.

Shaye Larsen

ASKER

Hi prokvk,

Not sure I understand. I implemented your suggestion and on hover it completely hides the iframe. This is not what I'm after. I just want it so the links on the iframe which is behind the drop down menu do not bleed through the drop down menu.

When I mouse over my drop down, it kills the drop down if their is a link on the iframe behind it.

Not sure what I'm missing here.

Thanks.

FYI, I do use jquery, in fact this is a jquery drop down menu.

Here is how I implemented your suggestion in conjunction with the code above.  Thanks.
 
<script type="text/javascript">
        $(function () {
            //let's say your menu is: ul#menu
            //let's say your iframe is: iframe#ifr
            
            $('ul#nav').hover(function () {
                $('iframe#iframe_i_nav').hide();
            },function () {
                $('iframe#iframe_i_nav').show();
            });
        });
    </script>

Open in new window

SOLUTION

prokvk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Shaye Larsen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial