Suckerfish drop-downs over iframe in FireFox

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Martial Spirit
    #1

    Suckerfish drop-downs over iframe in FireFox

    Hello-

    I was amazed at the suckerfish drop-downs from AListApart.com. They
    work great except for one thing, if I position the drop-downs over an
    iframe element, on mouseover the menus disappear. It works fine in IE,
    but not FireFox. I would like to implement these menus, but if I can't
    get this to work, I gotta look at something else.

    If anyone has some suggestions, I would appreciate it.

    Thanks,


    ANdrew Maddox

    *************** ****HERE IS THE
    CODE*********** *************** *************** *


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en">< head><title>the Suckerfish</title>


    <meta http-equiv="Content-Language" content="en-gb">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">

    body {
    font-family: arial, helvetica, serif;
    font-size: 80%;
    background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
    padding: 2em;
    margin: 0;
    }

    #content {
    width: 34em;
    background-color: #f4ecd9;
    padding: 1em 0;
    border: 6px double #7d6340;
    margin: auto;
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 32em;
    }
    html>body #content {
    width: 32em;
    }

    a {
    text-decoration: none;
    }

    a:link {
    color: #080;
    }

    a:visited {
    color: #790;
    }

    a:active {
    color: red;
    }

    a:hover {
    text-decoration: underline;
    }

    h1 {
    text-align: center;
    padding: 0 0 0.25em 0;
    margin: 0;
    }

    ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    #nav a {
    font-weight: bold;
    color: green;
    }

    #nav a {
    text-decoration: none;
    }

    #nav li li a {
    display: block;
    font-weight: normal;
    color: #060;
    padding: 0.2em 10px;
    }

    #nav li li a:hover {
    padding: 0.2em 5px;
    border: 5px solid #7d6340;
    border-width: 0 5px;
    }


    li {
    float: left;
    position: relative;
    width: 10em;
    text-align: center;
    cursor: default;
    background-color: white;
    border: 1px solid #7d6340;
    border-width: 1px 0;
    }

    li#first {
    border-left-width: 1em;
    }

    li#last {
    border-right-width: 1em;
    }

    /*
    li ul{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    font-weight: normal;
    background: url(images/ddbg3.gif) bottom left no-repeat;
    padding: 0.5em 0 1em 0;
    border-right: solid 1px #7d6340;
    }
    */

    li ul{
    display:none;
    position: absolute;
    clear: right;
    top: 100%;
    left: 0;
    font-weight: normal;
    background: url(images/ddbg3.gif) bottom left no-repeat;
    padding: 0.5em 0 1em 0;
    border-right: solid 1px #7d6340;
    z-index:9;
    }

    iframe {
    position: absolute;
    //align: left;
    //top: 10px;
    //left: 0;
    z-index: 1;
    }

    li>ul {
    top: auto;
    left: auto;
    }

    li li {
    display: block;
    float: none;
    background-color: transparent;
    border: 0;
    }

    li:hover ul, li.over ul {
    display: block;
    }



    hr {
    display: none;
    }

    p {
    clear: left;
    background: url(images/remora.gif) center left no-repeat;
    padding: 1em 1em 0 1em;
    margin: 0;
    }

    p.image {
    float: right;
    font-size: 0.8em;
    text-align: center;
    color: #7d6340;
    padding: 1.25em 1.25em 0.25em 0.25em;
    }

    p.image img {
    display: block;
    border: 1px solid #7d6340;
    }

    </style>

    <script type="text/javascript"><!--//--><![CDATA[//><!--

    startList = function() {
    if (document.all&& document.getEle mentById) {
    navRoot = document.getEle mentById("nav") ;
    for (i=0; i<navRoot.child Nodes.length; i++) {
    node = navRoot.childNo des[i];
    if (node.nodeName= ="LI") {
    node.onmouseove r=function() {
    this.className+ =" over";
    }
    node.onmouseout =function() {
    this.className= this.className. replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=s tartList;

    //--><!]]></script></head>


    <body>

    <div id="content">

    <h1><img src="the%20Suck erfish_files/logo2.gif" width="262"
    height="103" alt="the Suckerfish"></h1>

    <hr>

    <ul id="nav" >

    <li id="first">
    <div><a href="http://www.cnn.com">Ov erview</a></div>
    <ul>
    <li><a href="http://www.cnn.com">Cl assification</a></li>
    <li><a href="http://www.cnn.com">Ph yscial Characteristics </a></li>
    <li><a href="http://www.cnn.com">Ha bitat</a></li>
    <li><a href="http://www.cnn.com">Li festyle</a></li>
    <li><a href="http://www.cnn.com">Ev olution</a></li>
    <li><a href="http://www.cnn.com">Di stribution</a></li>
    </ul>
    </li>

    <li>
    <div><a href="http://www.cnn.com">Sp ecies</a></div>
    <ul>
    <li><a href="http://www.cnn.com">Ce ylonese remora</a></li>
    <li><a href="http://www.cnn.com">Re mora remora</a></li>
    <li><a href="http://www.cnn.com">Sh arksucker</a></li>
    <li><a href="http://www.cnn.com">Sl ender remora</a></li>
    <li><a href="http://www.cnn.com">Sp earfish remora</a></li>
    <li><a href="http://www.cnn.com">Wh itefin sharksucker</a></li>
    <li><img src="the%20Suck erfish_files/remora6.gif" width="59"
    height="80" alt="The top of a remoras head"></li>
    </ul>
    </li>

    <li id="last">
    <div><a href="http://www.cnn.com">Li nks</a></div>
    <ul>
    <li><a href="http://www.itis.usda.g ov/servlet/SingleRpt/SingleRpt?amp;s earch_topic=TSN &amp;search_val ue=168567">Remo ras
    at ITIS</a></li>
    <li><a href="http://animaldiversity .ummz.umich.edu/accounts/remora/r._remora.html" >Remora
    remora at ADW</a></li>
    <li><a href="http://www.oceanlight. com/html/remora_sp.html" >Phillip
    Colla photographs</a></li>
    <li><img src="the%20Suck erfish_files/remora3.gif" width="100"
    height="35" alt="Remora"></li>
    <li><a href="http://www.amonline.ne t.au/fishes/fishfacts/fish/enaucrates.htm" >Slender
    suckerfish at Australian Museum Online</a></li>
    <li><a href="http://www.colzoo.org/animalareas/shores/remora.html">Re mora
    at Columbus Zoo</a></li>

    </ul>
    </li>

    </ul>

    <hr>

    </div>
    <iframe src="contents.h tm" frameborder=0></iframe>

    </body></html>

    *************** *************** *************** *************** ***************
    Tags: None
    • Matthias Gutfeldt
      #2
      Re: Suckerfish drop-downs over iframe in FireFox

      Martial Spirit wrote:[color=blue]
      > Hello-
      >
      > I was amazed at the suckerfish drop-downs from AListApart.com. They
      > work great except for one thing, if I position the drop-downs over an
      > iframe element, on mouseover the menus disappear. It works fine in IE,
      > but not FireFox. I would like to implement these menus, but if I can't
      > get this to work, I gotta look at something else.
      >
      > If anyone has some suggestions, I would appreciate it.[/color]

      Validate your markup. For example, IFRAME is not allowed in XHTML
      Strict, and there's a whole bunch of other problems.

      And are you sure it's a CSS problem? After all, the drop-down is done
      with Javascript, not CSS.


      Matthias

        Comment

        Previous template Next
        Working...