title: Image positioning different between Chrome and Firefox
body: <p>I have two images that I want to be positioned directly on top of each other. This HTML is generated by a script every so often so I have included the CSS directly within the HTML itself.</p>
  
  <pre><code>&lt;div style="text-align:center"&gt;
  &lt;img id="background" 
  style="position: absolute; z-index: 1; " 
  src="background.png"/&gt;
  &lt;img id="foreground" 
  style="position: relative; z-index: 10; " 
  src="foreground.png" border="0" usemap="#map"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works perfectly, except in Chrome.
  In firefox and Internet explorer it works 100% of the time, I can sit and hit refresh and it is fine. In Chrome sometimes on page load or refresh the background image appears to be shifted 50% to the right? 
  I just did a quick test and 5/10 times (half of the time) it would appear shifted to the right on a refresh.
  Does anyone have any ideas what could be causing this?</p>