CSS hover and iframes

HTML & CSS
1

Hi,

I have a drop down menu on my site @ www.footballud.com - The menu worked fine until i added an iframe ad to the site now when i hover over the dropdown the menu disappears behind the iframe - Ive tried changing the zindex etc on the menu and no effect. Ive looked around the net and it appears there is nothing that can be done for this but before giving up I thought I would ask here if anyone is aware of a workaround for this.

Thanks

2

Just tried it and my drop shows over the top of the iframe. So it must be something else.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } CSS Drop Down Menu </title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
body {
font-size:100%;
background:#ccc;
}
#nav {
list-style:none;
height:2em;
border:1px solid #000;
width:964px;
margin:0 auto;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
border-right:1px solid #000;
}
#nav li.last {
border-right:0;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
font-weight:bold;
text-decoration:none;
line-height:2em;
}
#nav a b {
position:absolute;
bottom:-1px;right:0;
border-left:12px dashed transparent;
border-bottom:12px solid #000;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
border-top:1px solid #000;
}
#nav ul li {
border:1px solid #000;
border-top:0;
}
#nav li:hover ul {
left:-1px;
top:auto;
}
-->
</style>
<!--[if IE 6]>
<style type="text/css">
body{behavior:url("csshover.htc");}
</style>
<![endif]-->
</head>
<body>

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT<b></b></a> 
    <ul>
      <li><a href="#">GENERAL</a></li>
      <li><a href="#">BOOKS</a></li>
      <li><a href="#">FINE ART</a></li>
      <li><a href="#">READING</a></li>
      <li><a href="#">WRITING</a></li>
    </ul>
  </li>
  <li><a href="#">DIRECTIONS</a></li>
  <li><a href="#">SUPPORT</a></li>
  <li class="last"><a href="#">CONTACT</a></li>
</ul>
<IFRAME SRC="http://www.visibilityinherit.com/" WIDTH=850 HEIGHT=100></IFRAME>


</body>
</html>
3

Hi,

Yes you can layer iframes but the problem is that the content in your iframe is a flash file. You can only layer over flash if the parameters in the flash file themselves are set to opaque (wmode=“opaque”).

If the url in the iframe belongs to you the edit the flash parameters as follows.


    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90" id="banner" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="http://cachewww.affutdmedia.com/whfeed/bnr/football/en/banner_3team/banner.swf" />
[B] <param name="wmode" value="opaque">[/B]
    <param name="quality" value="high" />    
    <param name="flashVars" value="member=DEFAULT&channel=DEFAULT&campaign=DEFAULT" />
    <param name="bgcolor" value="#ffffff" />    
    <embed [B]wmode="opaque" [/B]src="http://cachewww.affutdmedia.com/whfeed/bnr/football/en/banner_3team/banner.swf" quality="high" bgcolor="#ffffff" width="728" height="90" name="banner" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" flashVars="member=DEFAULT&channel=DEFAULT&campaign=DEFAULT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>

If the url in the iframe is an external site not under your control then there’s little you can do easily.

The only way I know is that you create a transparent iframe dynamically in the html just after the original iframe and drag it into the exact place that the menu passes over and that will keep the menu on top. Unfortunately that only seems to work in Firefox.

4

Thanks for the help - hadn’t occurred to me that the content was flash and as i dont control the flash will just change it around to a different ad that isn’t flash. Thanks again