Hey everyone
I have a customised version of a superfish dropdown menu and a nivo slider that is working fine in Safari, FF, Opera, Chrome and IE8.
however, it’s all going wrong in IE6 & 7…
I am getting script errors reported in those browsers and very significant issues. But I’m pretty sure css is causing the problem as I haven’t touched the scripts. The basic superfish works down to IE6 and Nivo slider to IE7 with some operation in IE6 but obviously my customisations have broken things in those browsers somewhere along the line…I’m pulling my hair out trying to figure out what.
Menus
In IE7 I get the dropdowns appearing but they disappear before I can roll over them.
In IE6 they are not appearing at all (or perhaps they are being hidden by the slideshow). I have tried some z-index trickery on this as described at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/ but it doesn’t seem to be working…
Slideshow
slides are not showing at all in IE7 or 6.
I would like to get the slideshow working in 7 if possible and maybe have just a single static image for IE6 users if the slideshow is not possible
Can any of you browser compatibility wizards help me out with this one?
I have made a cut down set of files to illustrate the problem which can be seen here:
http://www.spiritlevel.co.uk/slidetest
my customised superfish css is here:
http://www.spiritlevel.co.uk/slidetest/css/superfish2.css
my customised nivo-slider css is here:
http://www.spiritlevel.co.uk/slidetest/css/nivo-slider.css
These are my initialisation scripts:
<script type=“text/javascript”>
// initialise plugins
$(document).ready(function() {
$(‘ul.sf-menu’).superfish({
delay: 800, // one second delay on mouseout
animation: {opacity:‘show’,height:‘show’}, // fade-in and slide-down animation
speed: ‘fast’, // faster animation speed
});
});
</script>
<script type=“text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:‘sliceDownLeft’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:300,
pauseTime:7000,
pauseOnHover:false, //Stop animation while hovering
});
});
</script>
Would really appreciate some help
thanks.