Jquery slider won't work on Firefox

Hi.

I'm using a Jquery slider on my site.

It works great on Safari, Chrome, and even IE. But it doesn't work on Firefox, the slides don't run, the first one comes up and it freezes there. I can the the first slide and and "border" around it (I'm  including a screen shot). I've tried a million things and I just don't know what to fix so that it works on Firefox.   I'm all out of options, I'm a newbie and I'm stuck!

This is the CSS for that:


.main_view {
      float:none;
      position: relative;
}

.window {
      height:333px;      width: 500px;
      overflow: hidden;
      position: relative;
}
.image_reel {
      position: absolute;
      top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.pagingnew {
      position: absolute;
      bottom: 10px; right: -7px;
      width: 178px; height:47px;
      z-index: 100;
      text-align: center;
      line-height: 40px;
      background: url(/images/marq/fondomarq.png) no-repeat;
      display: none;
}
.pagingnew a {
      padding: 5px;
      text-decoration: none;
      color: #fff;
}
.pagingnew a.active {
      font-weight: bold;
      background: #036;
      border: 1px solid #666;
      -moz-border-radius: 3px;
      -khtml-border-radius: 3px;
      -webkit-border-radius: 3px;
}
.pagingnew a:hover {font-weight: bold;}


#marqueslider {
      position:relative;
      margin:0;
      padding:0;
      top:2px;
      left:27px;
}

#marqueslider a {
      border:0;
}


In the snippet bellow I'm including the code from the HTML page where the slider shows up. Again, it works great on everything but on Firefox.  Please help!

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {

//Show the paging and activate its first link
$(".pagingnew").show();
$(".pagingnew a:first").addClass("active");

//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".pagingnew a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

}; 

//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.pagingnew a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.pagingnew a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	

//On Click
$(".pagingnew a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
});

});
</script>
  <div id="marqueslider">	
        <div class="main_view">
    <div class="window">
        <div class="image_reel">
             <a href="servicioexpress.php"><img src="slideshow/images/Express2.jpg" alt="Servicio Express"  /></a>
               <a href="info.php"><img src="slideshow/images/Saldos.jpg" alt="¡Saldos!" /></a>
        </div>
        <div class="pagingnew">
        <a href="servicioexpress.php" rel="1">1</a>
        <a href="info.php" rel="2">2</a>
    </div> 
    </div>
    
</div>
    </div>

Select all Open in new window