IE Firefox positioning issues... I think

IE Firefox positioning issues... I think

Caveat: I'm artist, not a programmer.

I pretty certain what I'm trying to accomplish is simple.

The effect is to drop three boxes (div containers with images) from the top to a set location. Fade them out, repeat indefinitely. There's a secondary effect to fade in another div but that hasn't broken at all.

The issue: per client request, the boxes can't squash (slideDown). So, I'm thinking... set the marginTop to negative number, set the container div overflow to hidden, and voila' sliding boxes.

Worked great. In Safari, on my Android phone, on an iPhone 3... Then I looked at it in IE. Nothing. No boxes. For thoroughness, tested in Firefox. Animation started, boxes came in, faded out... then nothing.

Aha! position issues, right?

Here's the code including CSS (I'm thinking the issue is there/working with the negative position).
  1. <style>
  2.   div#one, div#two, div#three {
  3.        margin:0;
  4.        width:310px;
  5.        display:none;
  6.         height:43px;
  7.         float:none;
  8.         position:fixed;
  9.         background:none;
  10.         margin:0;
  11.         top:-43;
  12.         left:10;
  13.         vertical-align:bottom;
  14.         overflow:hidden;
  15.         }  /* these boxes hold the images
  16.  
  17. div#three, div#two, div#one {
  18.         height:0;
  19.         }  /* these boxes hold the images */

  21. div#container1194 {
  22.         width: 680px;
  23.         height:225px;
  24.         border: 1px solid #cccccc;
  25.         position:fixed;
  26.         top:30px;  /* note: this item sets position on page, needs to be different places */
  27.         left:150px;  /* note: this item sets position , etc. */
  28.         overflow:hidden;
  29.         }  /* main container box */
  30.     div#rightText, div#showMe, div#logoHolder {
  31.         width:320px;
  32.     }  /*  these three boxes hold static text, link text that fades in, and logo  */
  33.     div#rightText {
  34.         float:right;
  35.         clear:both;
  36.         margin:0;
  37.         margin-top:43px;
  38.         font-family:Geneva, Arial, Helvetica, sans-serif;
  39.         font-size:20px;
  40.         color:#589199;
  41.     }
  42.     div#rightText p {
  43.         line-height:23px;
  44.         margin:0;
  45.         font-stretch:narrower;
  46.         text-indent:10px;
  47.     }
  48.     div#showMe {
  49.         float:right;
  50.         display:none;
  51.         top:65px;
  52.         margin-top:12px;
  53.         text-indent:10px;
  54.     }
  55.     div#showMe a:link, div#showMe a:visited  {
  56.         font-family:Geneva, Arial, Helvetica, sans-serif;
  57.         font-size:12px;
  58.         color:#6d6f64;
  59.         font-stretch:expanded;
  60.         letter-spacing:1px;
  61.         text-decoration:none;
  62.     }
  63.     div#showMe a:hover, div#showMe a:active  {
  64.         color:#00425f;
  65.     }
  66.     div#logoHolder {
  67.         display:block;
  68.         position:absolute;
  69.         top:152px;
  70.         margin:0;
  71.         vertical-align:bottom;
  72.     }
  73.     </style>
  74. <script src="http://code.jquery.com/jquery-latest.js">
  75. </script>
  76. <script>
  77. var foo=1000;
  78. function startOver() {
  79.     setTimeout(function(){runThree();},foo);
  80. };
  81. function displayMe() {
  82.     $("#showMe").fadeIn(foo/5);
  83. };
  84. function runAll() {
  85.    
  86. $("#three").fadeOut(foo/5);
  87.     $("#two").fadeOut(foo/5);
  88.     $("#one").fadeOut(foo/5);
  89.    
  90.     setTimeout(foo/5);
  91.     $("#one").css({
  92.             position:'absolute',
  93.          });
  94.    
  95. $("#three").animate({
  96.             height:0,
  97.             marginTop:-43},foo/5
  98.         );
  99.    
  100.     $("#two").animate(
  101. {
  102.             height:0,
  103.             marginTop:-43},foo/5
  104.    
  105.     );
  106.     $("#one").animate(
  107.             {height:0,
  108.             marginTop:-43},foo/5
  109.         );
  110.     setTimeout(function(){startOver();},foo/2);
  111. };
  112. function runThree() {
  113.     $("#three").show();
  114.     $("#three").animate(
  115.              {height:43},foo/5
  116.          );
  117.     $("#three").animate(
  118.              {marginTop:131},foo
  119.          );
  120.     setTimeout(function(){runTwo();},foo);
  121. };
  122. function runTwo() {
  123.     $("#three").css({
  124.             position:'absolute',
  125.             top:0,
  126.          
  127.         });
  128.     $("#two").show();
  129.     $("#two").animate(
  130.              {height:43},foo/5
  131.          );
  132.     $("#two").animate(
  133.              {marginTop:88},foo
  134.          );
  135.      setTimeout(function(){runOne();},foo);
  136. };
  137. function runOne() {
  138.     $("#two").css({
  139.             position:'absolute',
  140.             top:0,
  141.          
  142.         });
  143.     $("#one").show();
  144.     $("#one").animate(
  145.              {height:43},foo/5
  146.          );
  147.     $("#one").animate(
  148.              {marginTop:45},foo
  149.          );
  150.          
  151.          
  152.     setTimeout(function(){runAll();},foo*6);
  153.          
  154. };
  155.  
  156. $(window).load(function() {
  157.     runThree();
  158.     setTimeout(function(){displayMe();}, foo*3.75);
  159. });
  160. </script>

Anyone know which area I should be focusing on to fix? CSS or script?

Thanks in advance!