...

View Full Version : Suckerfish dropdown menu working in Chrome but not in IE6.



AdrianRobinson
04-18-2011, 03:36 PM
I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. My code works in Google Chrome but not in Internet Explorer 6. The following is my code:



<script type="text/javascript">

shHover = function() {
var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length;i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload",sfhover);

</script>

<style type="text/css">

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

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

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li: hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title?></title>
</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</body>


What am I missing here? I'm thinking it may have to do with the JavaScript.

teedoff
04-18-2011, 03:47 PM
I am trying to develop a Suckerfish dropdown menu by following the instructions on the Suckerfish website. My code works in Google Chrome but not in Internet Explorer 6. The following is my code:



<script type="text/javascript">

shHover = function() {
var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length;i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload",sfhover);

</script>

<style type="text/css">

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

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

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li: hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title?></title>
</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</body>


What am I missing here? I'm thinking it may have to do with the JavaScript.

Is that your code in the same order as you have it in your document?

AdrianRobinson
04-18-2011, 03:53 PM
Yes, same order.

teedoff
04-18-2011, 04:11 PM
Try moving everything above your doctype to inside your <head></head> tags. As it is, that code is invalid.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $title?></title>
<script type="text/javascript">

shHover = function() {
var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length;i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload",sfhover);

</script>

<style type="text/css">

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

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

#nav li {
float: left;
width: 10em;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li: hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>


</head>
<body>
<ul id="nav">
<li><a href="#">Percoidei</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<li><a href="#">Bluefishes</a></li>
<li><a href="#">Tigerfishes</a></li>
</ul>
</li>

<li><a href="#">Anabantoidei</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<li><a href="#">Pike-heads</a></li>
<li><a href="#">Giant gouramis</a></li>
</ul>
</li>
</body>
</html>

I also added a closing </html> tag which was missing(?) from your posted code. I added a complete doctype as well.

teedoff
04-18-2011, 04:19 PM
Still wont work correctly though. You still have some errors in your code. If you go back through the tutorial for the suckerfish menu, you will see. You can also run your new code through the validator (http://validator.w3.org)to see the errors.

abduraooft
04-18-2011, 04:57 PM
<script type="text/javascript">

shHover = function() {
var sfEls = document.getElementByID("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length;i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload",sfhover);

</script>

Any clues?

teedoff
04-18-2011, 05:14 PM
Any clues?

lol yep typoes there too. I didnt even look at his javascript, since his mark-up was a mess.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum