cycle plugin image height problem

cycle plugin image height problem

Hi, i'm using the cycle plugin to add a simple image slideshow to a webpage. Everything seems to work fine except that sometimes some images randomely appear all vertically squeezed with a height of 14px (?).

The problem appears on Firefox and IE. I'm using the latest cycle plugin version 2.86. And here after is the js and html code i'm using:

<script type="text/javascript">
      $(document).ready(function(){
            $("#pr_ss").cycle({
                  fx:"fade",
                  speed:"2000",
                  timeout: 0,
                  next:".next",
                  pager: "#nav"
            });
      });
</script>


      <div id="pr_col1">
            <div id="pr_ss">
                  <img width="500" class="next" src="upload/project/big/1272036330.jpg" alt="" />
                  <img width="500" class="next" src="upload/project/big/1272036673.jpg" alt="CTU-ETAG-1-4" />
                  <img width="500" class="next" src="upload/project/big/1272036632.jpg" alt="CTU-ETAG-2-5" />
                  <img width="500" class="next" src="upload/project/big/1272036587.jpg" alt="CTU-ETAG-3-6" />
                  <img width="500" class="next" src="upload/project/big/1272036536.jpg" alt="CTU-ETAG-7" />
                  <img width="500" class="next" src="upload/project/big/1272036767.jpg" alt="CTU-COUPE" />
                  <img width="500" class="next" src="upload/project/big/1269865724.jpg" alt="" />
                  <img width="500" class="next" src="upload/project/big/1269865576.jpg" alt="" />
            </div>
      </div>
























And here is the html source code from firebug while looking at the squeezed image:

<div style="position: relative; width: 500px; height: 500px;" id="pr_ss">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 8; opacity: 0;" class="next" src="upload/project/big/1272036330.jpg" alt="" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 8; opacity: 0; width: 500px; height: 353px;" class="next" src="upload/project/big/1272036673.jpg" alt="CTU-ETAG-1-4" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 8; opacity: 0; width: 500px; height: 353px;" class="next" src="upload/project/big/1272036632.jpg" alt="CTU-ETAG-2-5" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: block; z-index: 9; opacity: 1; width: 500px; height: 14px;" class="next" src="upload/project/big/1272036587.jpg" alt="CTU-ETAG-3-6" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 4; opacity: 0;" class="next" src="upload/project/big/1272036536.jpg" alt="CTU-ETAG-7" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 3; opacity: 0;" class="next" src="upload/project/big/1272036767.jpg" alt="CTU-COUPE" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 2; opacity: 0;" class="next" src="upload/project/big/1269865724.jpg" alt="" width="500">
    <img style="position: absolute; top: 0pt; left: 0pt; display: none; z-index: 1; opacity: 0;" class="next" src="upload/project/big/1269865576.jpg" alt="" width="500">
</div>

Did anyone experienced the same problem or know what i'm doing wrong here?

Thx for your answers,

Sam