• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2125
  • Last Modified:

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

0
Shaye Larsen
Asked:
Shaye Larsen
  • 4
  • 4
2 Solutions
 
prokvkCommented:
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 ...
0
 
Shaye LarsenAuthor Commented:
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.
0
 
prokvkCommented:
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

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Shaye LarsenAuthor Commented:
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.
0
 
prokvkCommented:
That's what I'm trying to tell you .. They will, in IE - iFrame WILL be on top disregard of positioning and z-indexing.
0
 
Shaye LarsenAuthor Commented:
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

0
 
prokvkCommented:
Hi there,

you know, the iFrame is what is causing this problem as I told you above. It's an IE issue and the only thing you can do is hide this entire iFrame .. I copy one my statement here:

I know, it's freaking ugly, but there is no good solution for this. You know - IE ...

I'm afraid you can't make this right. Only if you use some other container instead of iFrame.
0
 
Shaye LarsenAuthor Commented:
Ok, got it to work.

I had a div that did not have any z-index claimed that contained the iframe.  I simply gave that one a z-index of -1 and the drop down goes over the iframe.

Now I have a problem with it going over another drop down that is on the same page.
Here is the question for that one.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24181301.html

Thanks for your help.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now