jQuery Cycle plugin setting incorrect width

jQuery Cycle plugin setting incorrect width

Hi, I am using the wonderful Cycle plugin and until now no problems. Here is what I have:

  1. <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <scripttype="text/javascript src="http://photography.txpbuilders.com/js/jquery.cycle.all.min.js"></script>
And the initializing code:

  1. <!-- carousel --> <script type="text/javascript"> $(document).ready(function(){ $('#carousel').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next', prev: '#prev' }); }); </script>

When the page is first loaded, the container div #carousel is set to:

  1. <div id="carousel" class="clearfix" style="position: relative; ">
Which is fine, and all works well. However on page reload the style is changed and this breaks my CSS:

  1. <div id="carousel" class="clearfix" style="position: relative; width: 640px; height: 562px; ">
I am not sure my CSS is wrong - but here it is anyway. Hope someone can help with this - thanks!

  2. #carousel {
  3. width: 960px;
  4. background: transparent;
  5. }

  7. #carousel .slide {
  8. width: 960px;
  9. padding: 0;
  10. }

  12. #carousel .slide {
  13. margin: 0;
  14. }

  16. #carousel .slide img {
  17. float: left;
  18. width: 640px;
  19. height: 480px;
  20. padding: 0;
  21. }

  23. #carousel .details {
  24. float: right;
  25. width: 200px;
  26. padding: 20px;
  27. background: #eee;
  28. opacity: 0.5;
  29. }