Hi,
I've tried implementing jQuery cycle on my portfolio and it works in FF3 and Safari but not in IE. I've spent 24 hours researching and I just don't know how to fix it. I've checked for commas, I've tried altering the cleartype and cleartypeNoBg because I'm using .pngs but that still doesn't make a difference. I've disabled all of my other jquery scripts and it still doesn't work. I have 4 images in my slideshow and the first image shows but I think the problem is that in IE the height and width of the rest of the images is set to 0px. I'm also getting the error '[cycle] DOM not ready, queuing slideshow' This is my jQuery: <!--[if lte IE 7]> <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!-- LOCAL SCROLL JAVASCRIPT --> <script type='text/javascript' src='js/jquery.scrollTo-min.js'></script> <script type='text/javascript' src='js/jquery.localscroll-min.js'></script> <script type='text/javascript' src='js/init.js'></script> <!-- EASY SLIDER JAVASCRIPT FOR TYPE AND PHOTOGRAPHY PORTFOLIOS --> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ controlsBefore: '<p id="controls">', controlsAfter: '</p>', auto: false, continuous: false }); $("#slider2").easySlider({ controlsBefore: '<p id="controls2">', controlsAfter: '</p>', prevId: 'prevBtn2', nextId: 'nextBtn2' }); }); </script> <!-- JAVASCRIPT CYCLE JAVASCRIPT FOR WEB AND PRINT PORTFOLIOS --> <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> <script type="text/javascript"> $('#slideshow1').cycle({ fx: 'fade', cleartype: true, speed: 1000, timeout: 0, prev: '#prev', next: '#next' }); $('#slideshow2').cycle({ fx: 'fade', cleartype: true, speed: 1000, timeout: 0, prev: '#prev2', next: '#next2' }); </script> This is my css: .slideshow-image { margin: 63px 0 0 57px; position: absolute; display: block; } .pics { height: 463px; width: 841px; padding:0; margin:0; overflow: hidden } .pics img { height: 463px; width: 841px; padding: 0px; border: none; top:0; left:0 } All of this is from http://www.katherinecory.com. Does anyone have any ideas? I'd be eternally grateful if you do! Thank you. -- View this message in context: http://www.nabble.com/jQuery-cycle-IE-issue-tp25457791s27240p25457791.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.