suckerfish drop down not working in perl file in IE6. [Archive]

bazz

07-26-2005, 01:12 PM

Hello this fine Tuesday. :)

This is a quicky question, depsite the length ot the post.

'I' have got the Suckerfish drop down menu working in all browsers. OK so its their excellent script but in normal html files, it works. Unfortunately, when I put the full html into a perl file between <<EOF; or qq(, it breaks in IE6 :(

here (http://demodirectory.thechrissystem.com/cgi-bin/dropdown)

Have any of you seen this issue before and found a fix? The problem arises when the flyouts refuse to disappear when they should so that they all end up open at the same time. pretty unusable.

perhaps there is a known perl 'feature' which might cause this? Could it be that perl prefers JS to be in external files? I'll put the code below.

I would appreciate any tips or even a suggestion for a menu which will work as well in IE as this one does in FF.

#!/usr/bin/perl -w

use CGI;
use Cwd;
#use IO::Dir;
#use CGI qw(escapeHTML);
#use URI::Find;
#use strict;
#use lib '/domains/574/1936/html/cgi-bin';
#require 'header_and_footer.pm';
#my $incs=new includes;
print 'Content-type: text/html'."\n\n";

print qq(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Three Level Bones</title>

<style type="text/css">

body {
font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}

</style>

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

</head>

<body>

<h1>PERCIFORMES! (3)</h1>
<p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a>
<ul>
<li><a href="#">Echeneis</a>
<ul>
<li><a href="#">Sharksucker</a></li>
<li><a href="#">Whitefin Sharksucker</a></li>
</ul>
</li>
<li><a href="#">Phtheirichthys</a>
<ul>
<li><a href="#">Slender Suckerfish</a></li>
</ul>
</li>
<li><a href="#">Remora</a>
<ul>
<li><a href="#">Whalesucker</a></li>
<li><a href="#">Spearfish remora</a></li>
<li><a href="#">Marlinsucker</a></li>
<li><a href="#">Remora</a></li>
<li><a href="#">Ceylonese remora</a></li>
</ul>
</li>
<li><a href="#">Remorina</a>
<ul>
<li><a href="#">White suckerfish</a></li>
</ul>
</li>
<li><a href="#">Rhombochirus</a>
<ul>
<li><a href="#">R. osteochir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tilefishes</a>
<ul>
<li><a href="#">Caulolatilus</a></li>
<li><a href="#">Lopholatilus</a></li>
<li><a href="#">Malacanthus</a></li>
</ul>
</li>
<li><a href="#">Bluefishes</a>
<ul>
<li><a href="#">Pomatomus</a></li>
<li><a href="#">Scombrops</a></li>
<li><a href="#">Sphyraenops</a></li>
</ul>
</li>
<li><a href="#">Tigerfishes</a>
<ul>
<li><a href="#">Amniataba</a></li>
<li><a href="#">Bidyanus</a></li>
<li><a href="#">Hannia</a></li>
<li><a href="#">Hephaestus</a></li>
<li><a href="#">Lagusia</a></li>
<li><a href="#">Leiopotherapon</a></li>
<li><a href="#">Mesopristes</a></li>
<li><a href="#">Pelates</a></li>
<li><a href="#">Pelsartia</a></li>
<li><a href="#">Pingalla</a></li>
<li><a href="#">Rhyncopelates</a></li>
<li><a href="#">Scortum</a></li>
<li><a href="#">Syncomistes</a></li>
<li><a href="#">Terapon</a></li>
</ul>
</li>

</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a>
<ul>
<li><a href="#">Anabas</a></li>
<li><a href="#">Ctenopoma</a></li>
</ul>
</li>
<li><a href="#">Labyrinthfishes</a>
<ul>
<li><a href="#">Belontia</a></li>
<li><a href="#">Betta</a></li>
<li><a href="#">Colisa</a></li>
<li><a href="#">Macropodus</a></li>
<li><a href="#">Malpulutta</a></li>
<li><a href="#">Parosphromenus</a></li>
<li><a href="#">Pseudosphromenus</a></li>
<li><a href="#">Sphaerichthys</a></li>
<li><a href="#">Trichogaster</a></li>
<li><a href="#">Trichopsis</a></li>
</ul>
</li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>

</ul>
</li>

<li><a href="#">Gobioidei</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<li><a href="#">Gobies</a></li>
<li><a href="#">Loach gobies</a></li>
<li><a href="#">Odontobutidae</a></li>
<li><a href="#">Sandfishes</a></li>
<li><a href="#">Schindleriidae</a></li>
<li><a href="#">Sleepers</a></li>
<li><a href="#">Xenisthmidae</a></li>
</ul>
</li>

</ul>
</body>
</html>
);

Bazz

shyam

07-26-2005, 01:52 PM

then i don't think this is a perl/cgi issue at all

bazz

07-26-2005, 03:41 PM

:confused:
what might it be then? it works in IE 6 in an ordinary html page but when put into a perl file, IE stops working properly.

Bazz

Jeff Mott

07-26-2005, 07:06 PM

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");The string you want the RegExp to see is " sfhover\b", which means you have to insert escapes for the JavaScript strings (thus, " sfhover\\b"), which also means you then have to escape that for the Perl strings (thus, " sfhover\\\\b").

bazz

07-26-2005, 07:34 PM

excellent. I'll try that.

Bazz