[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2166
  • Last Modified:

drop down menu does not go over iframe

I think I need a second pair of eyes on this one.

I have a drop down menu which sits on the top page. I have an iframe that sits on the same page.  The drop down menu diplays on top of the iframe in firefox, but not internet explorer.  I have tested different options with z-index, but it sill disappears where the iframe is in IE.

Here is the top navigation.  The classes control the dropdowns.
 
<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("DynamicPagesServlet?action=&success=m1_dynamic_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 are the classes.
.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:1200;}
 
/* 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;}
 
#nav li:hover ul.sub
{left:0; top:26px; background: #DBDBDB; padding:3px; border:2px solid #E9E9E9; white-space:nowrap; height:auto; z-index:1300; 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:1400; height:auto;}
 
</style>
 
 
 
Here is the iframe that it won't go over in IE.
<iframe id="iframe_i_nav" name="iframe_i_nav" src="m1_dynamic_nav_frame1pre.jsp" frameborder="0" width="998" scrolling="no" height="25" align="top" style="background-color:#DFE7FF; 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; z-index:-1">
If you can see this, your browser does not support iframes!
</iframe>

Open in new window

0
Shaye Larsen
Asked:
Shaye Larsen
2 Solutions
 
quincydudeCommented:
which IE are you using? It works well on my IE7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.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:1200;}
 
/* 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;}
 
#nav li:hover ul.sub
{left:0; top:26px; background: #DBDBDB; padding:3px; border:2px solid #E9E9E9; white-space:nowrap; height:auto; z-index:1300; 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:1400; height:auto;}
 
</style>
 
 
 
 
</head>
 
<body>
 
<div align="center" id="topcorner" style="background-color:#C8D5FF">
        <ul id="nav" style="width:1000px">
                <li class="top"><a class="top_link_logo" href="" target="_parent"><span><img src="images/logo_fabuso.jpg" border="0"></span></a></li>
 
                <li class="top"><a class="top_link" href="" target="_parent"><span>Tools</span></a>
                        <ul class="sub" style="width:150px">
                                <li><a href=""><font color="333333">Instant Sites</font></a></li>
                        </ul>
                </li>
                <li class="top"><a class="top_link" href="" target="_parent"><span>Resources</span></a>
                        <ul class="sub" style="width:115px">
                                <li><a href=""><font color="333333">All</font></a></li>
                        </ul>
                </li>
                <li class="top"><a class="top_link" href="" 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="" target="_parent"><span>Logout</span></a></li>
        </ul>
</div>
<iframe id="iframe_i_nav" name="iframe_i_nav" src="" frameborder="1" width="998" scrolling="no" height="25" align="top" style="background-color:#DFE7FF; 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; z-index:-1">
</iframe>
 
</body>
</html>

Open in new window

0
 
Shaye LarsenAuthor Commented:
I'm using IE 7.  It's fixed now.  I found another div layer that was blocking it.  Once I moved that, it worked. Thanks.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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