Jquery Cycle plugin is stacking images only in IE 8 and 9

Jquery Cycle plugin is stacking images only in IE 8 and 9

  1. I can not figure out why the cycle plugin is stacking the images in internet explorer but works perfectly in all other major browsers (mac and windows versions). I am using 2 other plugins (mosaic and superfish) and they seem to be working fine so i know i am missing something simple somewhere. Any help would be much appreciated.
  2. Jquery
  3. <link href="css/styles.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/cycle.js"></script>
    <script type="text/javascript" src="js/hoverIntent.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <link type="text/css" rel="stylesheet" href="css/superfish.css" />
    <link href="css/mosaic.css" rel="stylesheet">
    <script type="text/javascript" src="js/mosaic.1.0.1.js"></script>






  4. <script type="text/javascript">
    $(document).ready(function() {
        $('.slideshow').cycle({
            fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'

        });
    });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('ul.sf-menu').superfish();
        });
     
        </script>
    <script type="text/javascript">       
                jQuery(function($){
                    $('.fade').mosaic();
    });
               
    </script>





















  5. HTML
  6. <div id="slide">
            <div class="wrap">
                <div id="slideshowContainer" style="margin-top:30px;">
                    <div class="slideshow">
                        <img src="images/food.jpg" width="940" height="368" />
                        <img src="images/wine.jpg" width="940" height="368" />
                        <img src="images/design.jpg" width="940" height="368" />
                        <img src="images/home.jpg" width="940" height="368" />
                        <img src="images/outdoor.jpg" width="940" height="368" />
                        <img src="images/travel.jpg" width="940" height="368" />
                        <img src="images/renew.jpg" width="940" height="368" />
                        <img src="images/reuse.jpg" width="940" height="368" />
                    </div>
                    <ul id="nav">
                        <li id="prev"><a href="#">Previous</a></li>
                        <li id="next"><a href="#">Next</a></li>
                      </ul>
                </div>
            </div>
        </div>


















  7. here is a link to what i am talking about
  8. no worky in ie