jQuery Cycle Plugin not loading in IE7 (and IE6), works perfect in all other browsers

jQuery Cycle Plugin not loading in IE7 (and IE6), works perfect in all other browsers

http://dev.mattcampy.com/mit_ci/index.html

The slides load as one huge stack in IE7, almost like the script isn't loading or something?

This is what I'm working with:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#gallery").css("overflow", "hidden");
  4. $("ul#slides").cycle({
  5. fx: 'fade',
  6. pause: 1,
  7. prev: '#prev',
  8. next: '#next',
  9. timeout: 8000,
  10. });
  11. $("#gallery").hover(function() {
  12. $("ul#nav2").fadeIn();
  13. },
  14. function() {
  15. $("ul#nav2").fadeOut();
  16. });
  17. });
  18. </script>
HTML:
  1. <div id="gallery" class="span-24 last">

  3.         <ul id="nav2"> 
  4.             <li id="prev"><a href="#">Previous</a></li> 
  5.             <li id="next"><a href="#">Next</a></li>
  6.         </ul>
  7.         
  8.         <ul id="slides"> 
  9.             <li><a href="#"><img src="images/gallery_1.png" alt="photo of boston" width="950" height="297" title=" " /></a></li>
  10.             <li><a href="#"><img src="images/ci_feature_quote_1.png" alt="image of quote" width="950" height="297" title=" " /></a></li> 
  11.             <li><a href="news.html#two"><img src="images/ci_feature_news.jpg" alt="Marco speaks HDL Global 2010" width="950" height="297" title=" " /></a></li>
  12.             <li><a href="#"><img src="images/ci_feature_quote_2.png" alt="image of quote" width="950" height="297" title=" " /></a></li> 
  13.             <li><a href="#"><img src="images/ci_feature_quote_3.png" alt="image of quote" width="950" height="297" title=" " /></a></li> 
  14.         </ul>
  15.         
  16. </div> <!-- END GALLERY -->
CSS:

  1. #gallery { background-color:#ffffff; border-top:7px solid #ffffff; position: relative; z-index: 5; height:297px; }
  2. #gallery ul { list-style:none; margin:0; padding:0; } 
  4. div#gallery ul#nav2 { display: none; list-style: none; position: absolute; width:950px; top: 125px; z-index: 15; border:none; background:none; }
  5. div#gallery ul#nav2 li#prev { float: left; margin: 0 0 0 10px; }
  6. div#gallery ul#nav2 li#next { float: right; margin: 0 10px 0 0; }
  7. div#gallery ul#nav2 li a { display: block; width: 40px; height: 40px; text-indent: -9999px; outline:none; }
  8. div#gallery ul#nav2 li#prev a { background: url(../images/prev_white.png); }
  9. div#gallery ul#nav2 li#next a { background: url(../images/next_white.png); }

  11. div#gallery ul#slides { list-style: none; }
  12. div#gallery ul#slides li { margin: 0; padding:0; }

Any help would be greatly appreciated!