Cycle Plugin and Internet Explorer

Cycle Plugin and Internet Explorer

Hey guys, I'm new here, but I have a burning question. I just can't get the Cycle plugin for Jquery to work with Internet Explorer. At all. I'm sure you've heard this before, but I tried searching and couldn't find my answer.

It works with Firefox, perfectly. When I load the page in either Internet Explorer 6 or Internet Explorer 7, however, I just see a bunch of images stacked on top of each other. I think it has something to do with the initiating script... or it could be the CSS I guess. Here's what I have:

(I put the relevant CSS inline)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>(Title)</title>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

   <link rel="shortcut icon" href="favicon.ico" />
   <link href="reset.css" rel="stylesheet" type="text/css" />
   <link href="style.css" rel="stylesheet" type="text/css" />

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.cycle.js"></script>
   <script type="text/javascript">
   $(document).ready(function(){
     $('.images').cycle({
       fx:     'fade',
       speed:   300,
       pause:   1 ,
       next:  '.images',
     });
   });
   </script>

   <!--[if IE 6]><link href="iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
   <!--[if IE 7]><link href="ie7style.css" rel="stylesheet" type="text/css" /><![endif]-->

</head>

<body>
   <div id="background">
   <div id="color">
   <div id="headwrapper">
      <div id="header">
         <a href="index.html"><img src="images/logo.jpg" alt="" /></a>
         <h1>GLS</h1>
         <h2>Transport</h2>
      </div>
      <div id="navigation">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="performance.html">Performance</a></li>
            <li><a href="location.html">Location</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
      </div>
   </div>
   </div>
   
   <div id="wrapper">
      <div id="maincolumn">
         <h1>Chemicals Transportation</h1>

         <div style="width: 450px; float: left;">
            <p>Our oldest business is a high quality liquid bulk carrier within the chemical industry
            with a proven track as one of the safest carriers in the business. A specialized fleet of
            stainless steel cargo tanks which includes vapor recover.  This award winning division has
            been recognized by major chemical shippers for our safety performance and on-time deliveries.</p>
         </div>

         <div class="images" style="margin-top: 15px; height: 500px; width: 400px; float: left;">
            <img src="images/chem3.jpg" alt="A Chemical Truck" />
            <img src="images/chem5.jpg" alt="A Chemical Truck" />
         </div>
      </div>

      <div id="anotherclear"></div>
   </div>

   <div id="clear"></div>
   
   <div id="footer"></div>

   </div>
</body>
</html>


I'm a complete Javascript noob.. so thanks for you help guys.