title: CSS Height and Width attributes not working correctly in IE10
body: <p>(Prior to this issue, I used conditional IE statements to make part of this excluded from IE Browsers, but that is no longer supported in IE10.)</p>
  
  <p>So I have three images on the header of my site stacked on top of each other. The one on the bottom is a .gif with a moving arm, the one above that is an image identical to the .gif but without the arm at all and in higher resolution (as the .gif cannot support a similar image quality.) On the same layer as the hi-res pick, I have a hi-res image of just the arm. I have the css set up so that when the image is hovered over, the only-arm image disappears revealing the .gif with the moving arm. </p>
  
  <p>You can view this here: <a href="http://www.applocity.blogspot.com" rel="nofollow">http://www.applocity.blogspot.com</a>
  (If viewed in Chrome or Firefox, it will work correctly. If viewed in IE prior to 10, only the gif will show without the hover-over animation, and if viewed in IE10 it will show the solo-arm no lined up correctly with the background image (although the animation works)</p>
  
  <p>I believe the problem lies in this code:</p>
  
  <pre><code>#chicken {
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  }
  
  #chicken:hover {
  opacity:0;
  }
  </code></pre>
  
  <p>This is the CSS code for the solo-arm and on Chrome and FF, the width and height 100% attributes work correctly and the arm aligns itself with the background, but in IE, it doesn't work for some reason. </p>
  
  <p>Can someone please tell me to either make the arm align with the image, or remove it only in IE using a method working for IE10?</p>