[jQuery] jQuery suckerfish not IE freindly?
Hello,
First time jQuery user here and I'll admit, Im more a php dev than a
javascript dev or designer. Currently finishing up a new project which
can be seen on my dev server http://thorpesystems.com:8080
The menu at the top is built using the following jQuery script and
version 1.2.6 of the jQuery lib.
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
The relevant parts of the css are....
#top {
height: 38px;
width: 100%;
overflow: visible;
}
/* MAIN MENU
---------------------------------------------------------------------------
*/
#menu {
margin: 0;
padding: 0;
float: right;
border-right: 1px solid #fff;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
display: block;
border-left: 1px solid #fff;
}
#menu li a {
display: block;
padding: 0 8px 0 8px;
height: 38px;
line-height: 38px;
background: url(../images/arrow.gif) bottom right no-repeat;
color: #fff;
text-decoration: none;
}
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
font-family: Arial, Helvetica, sans-serif;
z-index: 100;
position: relative;
}
.nav li {
border-left: 1px solid #fff;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
/*font: 1.22em/25px Arial, Helvetica, sans-serif;*/
background: #103c69;
color: #fff;
display: block;
padding: 0 9px;
text-transform: lowercase;
text-decoration: none;
}
.nav li a:hover {
background: #336799;
color: #fff;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #103c69;
color: #fff;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #103c69;
color: #fff;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: #336799;
color: #fff;
background: url(../images/arrow.gif) bottom right no-repeat;
}
.nav ul {
background: #6297cd;
border-bottom: 1px solid #fff;
list-style: none;
margin: 0;
/*width: 130px;*/
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 38px;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 1px solid #fff;
border-bottom: 0;
padding-right: 20px;
width: 131px;
white-space: nowrap;
}
.nav ul a:hover {
background: #103c69;
color: #fff;
}
Can anyone see why this wouldn't work at all in IE6 or below? Is it a
problem with the jQuery code or a css issue?
Any help much appreciated.
Thorpe.