Results are different per browser

Results are different per browser

I have tried this code in IE, FireFox, and Chrome and get three different results and do not know why. Here is a link to the page for a live look.  http://collectorwiz.com/slots/reeltest.php

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <style>
  8. #holder {
  9. float: left;
  10. height: 255px;
  11. overflow: hidden;
  12. }
  13. .container {
  14. margin: 0;
  15. float: left;
  16. width: 125px;
  17. }
  18. .slider {
  19. float: left;
  20. }
  21. ul {
  22. list-style-type: none;
  23. }
  24. #outer {
  25. position: relative;
  26. padding-top: 170px;
  27. padding-left: 35px;
  28. }
  29. </style>
  30. </head>

  32. <body>
  33. <div id="outer">
  34.   <div id="holder">
  35.     <?php
  36. for ($x = 1; $x <= 3; $x++) { 
  37. ?>
  38.     <div id="container<?php echo $x; ?>" class="container">
  39.       <div id="slider<?php echo $x; ?>" class="slider">
  40.         <ul class="slides">
  41.           <?php
  42. switch($x) {
  43. case 1;
  44. $reels=array(1,2,3,4,5,6,7,8,9,10);
  45. break;
  46. case 2;
  47. $reels=array(3,7,10,9,2,4,1,6,5,8);
  48. break;
  49. case 3;
  50. $reels=array(8,6,5,4,10,9,2,3,1,7);
  51. break;
  52. }
  53. $u=1;
  54. for ($z=1; $z<=6; $z++) {
  55. for ($y = 0; $y <= 9; $y++) { 

  57. ?>
  58.           <li class="slide slide<?php echo $u; ?>"><img src="<?php echo $reels[$y]; ?>.png" /></li>
  59.           <?php 
  60. $u++;
  61. } } ?>
  62.         </ul>
  63.       </div>
  64.     </div>
  65.     <?php } ?>
  66.   </div>
  67. </div>
  68. <div style="position: absolute; top: 0; left: 0; width: 500px;"> <img src="lucky-slots.png" USEMAP="#lucky-slots" BORDER=0>
  69.   <map name="lucky-slots">
  70.     <area name="Pay Table" shape="rect" coords="53,503,115,564" href="https://www.dollgenie.com/slots/pay-table.php"  alt="Lucky Slots Pay Table" title="Lucky Slots Pay Table" OnMouseOver="window.status='Lucky Slots Pay Table'; return true" OnMouseOut="window.status=''; return true">
  71.     <area name="Cash Out" shape="rect" coords="134,504,193,563" href=""  alt="Cash Out your Coins" title="Cash Out your Coins" OnMouseOver="window.status='Cash Out your Coins'; return true" OnMouseOut="window.status=''; return true">
  72.     <area name="Spin the Wheels" shape="rect" coords="209,502,272,564" href=""  alt="Spin the Wheels" title="Spin the Wheels" OnMouseOver="window.status='Spin the Wheels'; return true" OnMouseOut="window.status=''; return true" onClick="doSpin(); return false">
  73.     <area name="Play One Coin" shape="rect" coords="292,503,352,563" href=""  alt="Play One Coin" title="Play One Coin" OnMouseOver="window.status='Play One Coin'; return true" OnMouseOut="window.status=''; return true" onClick="addCoin(); return false">
  74.     <area name="Play Max Coins" shape="rect" coords="375,502,435,562" href=""  alt="Play Max Coins" title="Play Max Coins" onClick="maxCoin(); return false" OnMouseOver="window.status='Play Max Coins'; return true" OnMouseOut="window.status=''; return true">
  75.   </map>
  76. </div>
  77. <div style="position:absolute; top:425px; left:35px; z-index:50;">
  78.   <table>
  79.     <tr>
  80.       <td align="center" width="125"><font size="+2" color="#FFFFFF">Coins: <span id="mypoints">0</span></font></td>
  81.       <td align="center" width="150"><font size="+2" color="#FFFFFF">
  82.         <div id="mywin">0</div>
  83.         </font></td>
  84.       <td align="center"><font size="+2" color="#FFFFFF">Bet: <span id="mybet" style="color:#F00;">0</span></font></td>
  85.     </tr>
  86.   </table>
  87. </div>
  88. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
  89. <script>
  90. $(document).ready(function() {

  92.     //settings for slider
  93.     var height = 85;
  94.     var animationSpeed = 70;
  95.     var currentSlide = 1;

  97.     //cache DOM elements
  98.     var $slider = $('#slider1');
  99.     var $slideContainer = $('.slides', $slider);
  100.     var $slides = $('.slide', $slider);

  102.     var interval;

  104.     function startSlider($slider,$start,$end) {
  105. $end=($end+$start)-1;
  106. currentSlide=$start;
  107. $slideContainer = $('.slides', $slider);
  108. $slides = $('.slide', $slider);
  109.         interval = setInterval(function() {
  110. while(++currentSlide <$end) {
  111.             $slideContainer.animate({'margin-top': '-='+height}, animationSpeed, function() {
  112.                 if (++currentSlide === $end) {
  113. $('container1').stop();
  114.                 }
  115.             });
  116. }
  117.         });
  118.     }
  119. function startSlider1($slider1,$start1,$end1) {
  120. $end1=($end1+$start1)-1;
  121. currentSlide1=$start1;
  122. $slideContainer1 = $('.slides', $slider1);
  123. $slides1 = $('.slide', $slider1);
  124.         interval = setInterval(function() {
  125. while(++currentSlide1 <$end1) {
  126.             $slideContainer1.animate({'margin-top': '-='+height}, animationSpeed, function() {
  127.                 if (++currentSlide1 === $end1) {
  128. $('container2').stop();
  129.                 }
  130.             });
  131. }
  132.         });
  133.     }
  134. function startSlider2($slider2,$start2,$end2) {
  135. $end2=($end2+$start2)-1;
  136. currentSlide2=$start2;
  137. $slideContainer2 = $('.slides', $slider2);
  138. $slides2 = $('.slide', $slider2);
  139.         interval = setInterval(function() {
  140. while(++currentSlide2 <$end2) {
  141.             $slideContainer2.animate({'margin-top': '-='+height}, animationSpeed, function() {
  142.                 if (++currentSlide2 === $end2) {
  143. $('container3').stop();
  144.                 }
  145.             });
  146. }
  147.         });
  148.     }
  150.     
  151.     startSlider('#slider1',5,58);
  152.     startSlider1('#slider2',4,50);
  153.     startSlider2('#slider3',3,51);

  155. });

  157. </script>
  158. </body>
  159. </html>