Witam
Mam taki mały skrypcik płynnej rotacji obrazków.
Mam z nim problem nie mogę dojść co jest nie tak mianowicie działa prawidłowo pod każdą przeglądarką
firefox, opera, chrome, internet explorer 8, natomiast w internet explorer 7 się sypie.

Doszedłem że powodem tego jest następujący wpis
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jeżeli go usunę to w IE7 działa ale problem w tym że powyższy skrypt chcę umieścić w serwisie w którym jest taki wpis i nie mogę się go pozbyć.

Proszę o pomoc.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  3. <script type="text/javascript">
  4. function wlewo()
  5. {
  6.             var item_width = $('#carousel_ul li').outerWidth(true);
  7.  
  8.             /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
  9.             var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
  10.  
  11.             $('#carousel_ul:not(:animated)').animate({'left' : left_indent},1500,function(){    
  12.  
  13.             /* when sliding to left we are moving the last item before the first list item */            
  14.             $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
  15.  
  16.             /* and again, when we make that change we are setting the left indent of our unordered list to the default -130px */
  17.             $('#carousel_ul').css({'left' : '-130px'});
  18.             });
  19. }
  20. function wprawo()
  21. {
  22.  
  23.             //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
  24.             var item_width = $('#carousel_ul li').outerWidth(true);
  25.  
  26.             //calculae the new left indent of the unordered list
  27.             var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;
  28.  
  29.             //make the sliding effect using jquery's anumate function '
  30.             $('#carousel_ul:not(:animated)').animate({'left' : left_indent},1500,function(){    
  31.  
  32.                 //get the first list item and put it after the last list item (that's how the infinite effects is made) '
  33.                 $('#carousel_ul li:last').after($('#carousel_ul li:first')); 
  34.  
  35.                 //and get the left indent to the default -130px
  36.                 $('#carousel_ul').css({'left' : '-130px'});
  37.             }); 
  38. }
  39.   $(document).ready(function() {
  40.         //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
  41.         $('#carousel_ul li:first').before($('#carousel_ul li:last')); 
  42.  
  43.  
  44.         //when user clicks the image for sliding right        
  45.         $('#right_scroll img').click(function(){
  46.             wprawo();   
  47.         });
  48.  
  49.         //when user clicks the image for sliding left
  50.         $('#left_scroll img').click(function(){
  51.                       wlewo();
  52.  
  53.  
  54.  
  55.         });
  56.  
  57.                   setInterval(function() {
  58.                        wprawo();
  59.             }, 5000);  
  60.  
  61.   });  
  62. </script>
  63. <style type="text/css">
  64.  
  65. #carousel_inner {
  66. float:left; /* important for inline positioning */
  67. width:478px; /* important (this width = width of list item(including margin) * items shown */ 
  68. height:130px;
  69. overflow: hidden;  /* important (hide the items outside the div) */
  70. /* non-important styling bellow */
  71. background: #d7cd85;
  72. }
  73.  
  74. #carousel_ul {
  75. position:relative;
  76. left:-130px; /* important (this should be negative number of list items width(including margin) */
  77. list-style-type: none; /* removing the default styling for unordered list items */
  78. height:76px;
  79. margin-left: 11px;
  80.  
  81. margin-top:0px;
  82. padding: 0px;
  83. width:9999px; /* important */
  84. /* non-important styling bellow */
  85.  
  86. }
  87.  
  88. #carousel_ul li{
  89. float: left; /* important for inline positioning of the list items */                                    
  90. width:116px;  /* fixed width, important */
  91. /* just styling bellow*/
  92. padding:0px;
  93.  
  94.  
  95. margin-top:10px;
  96.  
  97. margin-left:3px; 
  98.  
  99. }
  100.  
  101. #carousel_ul li img {
  102. .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
  103. /* styling */
  104. cursor:pointer;
  105. cursor: hand; 
  106. border:0px; 
  107. }
  108. #left_scroll, #right_scroll{
  109. float:right; 
  110. height:30px; 
  111. width:48px; 
  112. margin:0px;
  113.  
  114. }
  115. #left_scroll img, #right_scroll img{
  116. /*styling*/
  117. cursor: pointer;
  118. cursor: hand;
  119. margin:0px;
  120. }
  121. </style>
  122. </head>
  123. <body>
  124.  
  125.   <div id='carousel_container'>
  126.  
  127.     <div id='carousel_inner'>
  128.         <ul id='carousel_ul'>
  129.             <li><a href='#'><img src='item1.jpg' style="width:116px; height:76px" /></a></li>
  130.             <li><a href='#'><img src='item2.jpg' style="width:116px; height:76px" /></a></li>
  131.             <li><a href='#'><img src='item3.jpg' style="width:116px; height:76px" /></a></li>
  132.             <li><a href='#'><img src='item4.jpg' style="width:116px; height:76px"  /></a></li>
  133.             <li><a href='#'><img src='item5.jpg' style="width:116px; height:76px"  /></a></li>
  134.             <li><a href='#'><img src='item6.jpg' style="width:116px; height:76px"  /></a></li>
  135.         </ul>
  136.          <div id='right_scroll'><img src='prawo.jpg' /></div>
  137.          <div id='left_scroll'><img src='lewo.jpg' /></div>
  138.  
  139.     </div>
  140.   </div>
[HTML] pobierz, plaintext