title: Problem with jquery animation and Internet explorer 8
body: <p>this evening I worked very hard trying to understand html positions and jquery animation a I did an HTML page as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;style type="text/css"&gt;
  body {
      background-image: url(Cartoon_Landscape2.jpg);
  }
  
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
  function moveDIV ( obj, x, y ) {
  var element = document.getElementById(obj);
  element.style.left=x;
  element.style.top=y;
  }
  
  var t;
  
  function anim1()
  {
  moveDIV("mariposa", screen.availWidth, screen.availHeight);
  $("#mariposa").animate({left: '-84', top: '-58'}, 10000);
  
  t=setTimeout("anim1()",22000);
  
  //moveDIV("mariposa2", '-84', screen.availHeight);
  //$("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
  }
  
  function anim2()
  {
  moveDIV("mariposa2", '-84', screen.availHeight);
  $("#mariposa2").animate({left: screen.availWidth, top: '-58'}, 10000);
  
  t=setTimeout("anim2()",22000);
  
  }
  
  function callfunctions()
  {
  moveDIV("mariposa2", '-84', screen.availHeight);
  anim1();
  var b=setTimeout("anim2()",11000);
  }
  &lt;/script&gt; 
  
  
  
  &lt;/head&gt;
  &lt;body  onLoad="javascript:callfunctions();"     &gt;
  
  
  
  &lt;div id="mariposa" style="position:fixed; overflow: hidden;"&gt;
  &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa" width="84" height="58" align="top"&gt;
  &lt;param name=movie value="mariposa.swf"&gt;
  &lt;param name=wmode value=transparent&gt;
  &lt;param name=quality value=high&gt;
  &lt;embed src="mariposa.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa"&gt;
  &lt;/embed&gt;
  &lt;/object&gt;
  &lt;/div&gt;
  
  &lt;div id="mariposa2" style="position:fixed; overflow: hidden;"&gt;
  &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" name="mariposa2" width="-84" height="58" align="top"&gt;
  &lt;param name=movie value="mariposa2.swf"&gt;
  &lt;param name=wmode value=transparent&gt;
  &lt;param name=quality value=high&gt;
  &lt;embed src="mariposa2.swf" width="84" type="application/x-shockwave-flash" height="58" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" wmode="transparent" align="top" name="mariposa2"&gt;
  &lt;/embed&gt;
  &lt;/object&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So the page shows a flash animation with diagonal motion from the left and from the right of screen.</p>
  
  <p>And was perfect for me, and works nice on firefox, opera, safari , chome, but not on internet explorer 8!!, what can I do to fix this problem?   =(</p>
  
  <p>P.S. if I use absolute position in both DIVs, the animation works on internet explorer but unnecessary scrollbars are created.</p>
  
  <p>Thanks</p>