SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS hover and iframes

    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. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just tried it and my drop shows over the top of the iframe. So it must be something else.

    Code:
    <!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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
        <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" />
     <param name="wmode" value="opaque">
        <param name="quality" value="high" />    
        <param name="flashVars" value="member=DEFAULT&channel=DEFAULT&campaign=DEFAULT" />
        <param name="bgcolor" value="#ffffff" />    
        <embed wmode="opaque" 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. #4
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •