[jQuery] jQuery cycle IE issue

[kcory]

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.