title: jquery.cycle: images don't load in ffox?
body: <p>Noticed a problem with a simple splash page using jquery.cycle.  </p>
  
  <p><a href="http://www.rynicdesign.com/" rel="nofollow noreferrer">http://www.rynicdesign.com/</a></p>
  
  <p>With firefox (firebug installed), the rotating images will not display the first time the page is accessed (without cache - ctrl-f5) yet will load properly on subsequent requests.  </p>
  
  <p>Not seeing this condition with other browsers (ie, chrome, safari).</p>
  
  <p>Any ideas why?</p>
  
  <p>(page is small - but here is relevant info)</p>
  
  <pre><code>    &lt;link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&amp;amp;2.8.0r4/build/base/base-min.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" /&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
      $(document).ready(function() {
          $('.middle').cycle({
              fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
              autostop: 1,
              timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
          });
      });
  
      //--&gt;&lt;!]]&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body id="page"&gt;
      &lt;div id="doc4" class="main-frame"&gt;
      &lt;div class="top"&gt;&lt;/div&gt;
      &lt;div class="middle" align="center"&gt;
          &lt;img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" /&gt;
          &lt;a href="/about"&gt;&lt;img src="/templates/splash/images/enter.gif" alt="click to enter website" /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="bottom"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is splash.css</p>
  
  <pre><code>html, body, #page, #doc4 {height:100%;margin:auto;}
  
  .top, .middle, .bottom {clear:both;overflow:auto;display:block;}
  .middle {background-color:#ffffff;overflow:hidden;}
  .top, .bottom {height:35%;}
  
  .top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
  .bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}
  
  #doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
  </code></pre>