title: Issue with image formatting with chrome (CSS)
body: <p>I'm having an issue with Google Chrome with my new website, I am designing an iPhone out of different images, the issue I am having is with all other browsers the code loads fine and the iPhone displays correctly, however with Chrome it seems to for some reason enlarge the image to the point that it is slightly blurry and it also moved the image about 1px to the left making it obvious to the end user that the iPhone is in separate pieces. </p>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;!-- Copyright 2012 Ben Green --&gt;
  &lt;!-- v1.1a Just iStuff --&gt;
  &lt;!-- Not to be reproduced without permission --&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="main.css" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Just iStuff&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="layout"&gt;
      &lt;div id="iphone-holder"&gt;
          &lt;div id="iphone-top"&gt;
          &lt;/div&gt;
          &lt;div id="iphone-left"&gt;
          &lt;/div&gt;
          &lt;div id="iphone-content"&gt;            
              &lt;div id="home-top-alternate2"&gt;
              &lt;/div&gt;
              &lt;div id="button-top"&gt;
              &lt;/div&gt;
              &lt;div id="button-left"&gt;
              &lt;/div&gt;
              &lt;div id="icon-row-holder"&gt;
  
                      &lt;/div&gt; &lt;!-- icon row holder --&gt;
                  &lt;/div&gt;
              &lt;div id="button-right"&gt;
              &lt;/div&gt;
          &lt;div id="iphone-right"&gt;
          &lt;/div&gt;
          &lt;div id="iphone-bottom"&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS Code</p>
  
  <pre><code>    #iphone-top {
      width:461px;
      height:123px;
      float: left;
      background-image: url(images/iphonetop.png);
  }
  
  #iphone-left {
      width:94px;
      height:413px;
      float: left;
      background-image: url(images/iphoneleft.png);
  }
  
  #iphone-content {
      width: 274px;
      height: 413px;
      float: left;
      background: url(images/wallpaper.png) no-repeat;
  }
  
  #iphone-right {
      width: 93px;
      height:413px;
      float: left;
      background: url(images/iphoneright.png) no-repeat;
  }
  
  #iphone-bottom {
      width:461px;
      height:225px;
      background-image: url(images/iphonebottom.png);
      float: left;
  }
  
  #iphone-holder {
      width: 461px;
      margin-right: auto;
      margin-left: auto;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/w5a5f" rel="nofollow">http://jsfiddle.net/w5a5f</a></p>
  
  <p><br/>Using Chrome: 
  <a href="http://img851.imageshack.us/img851/7237/iphone1q.png" rel="nofollow">http://img851.imageshack.us/img851/7237/iphone1q.png</a> 
  <br/>Using Safari: 
  <a href="http://img571.imageshack.us/img571/5482/iphone2t.png" rel="nofollow">http://img571.imageshack.us/img571/5482/iphone2t.png</a>
  <br/>Jsfiddle: jsfiddle.net/w5a5f </p>
  
  <p>Firefox &amp; Safari display it properly but Chrome fails to, do I need some specific chrome CSS to stop it from enlarging it or is there a fix for this?</p>
  
  <p>UPDATE: It would seem that once uploaded to a server this issue disappears, so it only occurs on a local file...</p>