By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

Suckerfish drop-downs over iframe in FireFox

P: n/a
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.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

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

<div id="content">

<h1><img src="the%20Suckerfish_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">Overview</a></div>
<ul>
<li><a href="http://www.cnn.com">Classification</a></li>
<li><a href="http://www.cnn.com">Physcial Characteristics</a></li>
<li><a href="http://www.cnn.com">Habitat</a></li>
<li><a href="http://www.cnn.com">Lifestyle</a></li>
<li><a href="http://www.cnn.com">Evolution</a></li>
<li><a href="http://www.cnn.com">Distribution</a></li>
</ul>
</li>

<li>
<div><a href="http://www.cnn.com">Species</a></div>
<ul>
<li><a href="http://www.cnn.com">Ceylonese remora</a></li>
<li><a href="http://www.cnn.com">Remora remora</a></li>
<li><a href="http://www.cnn.com">Sharksucker</a></li>
<li><a href="http://www.cnn.com">Slender remora</a></li>
<li><a href="http://www.cnn.com">Spearfish remora</a></li>
<li><a href="http://www.cnn.com">Whitefin sharksucker</a></li>
<li><img src="the%20Suckerfish_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">Links</a></div>
<ul>
<li><a href="http://www.itis.usda.gov/servlet/SingleRpt/SingleRpt?amp;search_topic=TSN&amp;search_value=16 8567">Remoras
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%20Suckerfish_files/remora3.gif" width="100"
height="35" alt="Remora"></li>
<li><a href="http://www.amonline.net.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">Remora
at Columbus Zoo</a></li>

</ul>
</li>

</ul>

<hr>

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

</body></html>

************************************************** *************************
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Martial Spirit wrote:
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.


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

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.