title: Overlaying div works in Chrome and FF but not IE?
body: <p>I'm having trouble overlaying two divs over an image. My goal is to make a simple lightbox and when the user moves the mouse over to the right or left hand side of the lightbox I want the mouse to become a pointer and for left and right arrows to display. Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;img src="http://dummyimage.com/600x600/000/fff.jpg"&gt;
      &lt;div class="left"&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
          position: fixed;
          top: 50%;
          left: 50%;
          width: 600px;
          height: 600px;
          margin-top: -300px;
          margin-left: -300px;
          background-color: lightgrey;
          z-index: 10000;
  }
  
  .left {
          position: absolute;
          top: 0;
          left: 0;
          width: 100px;
          height: 100%;
          cursor: pointer;
          z-index: 10500;
  }
  
  .left:hover {
          background: rgba(248, 248, 248, 0) left center no-repeat url("http://imageshack.com/a/img823/9885/bsux.png");
  }
  
  .right {
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
          height: 100%;
          cursor: pointer;
          z-index: 10500;
  }
  
  .right:hover {
          background: rgba(248, 248, 248, 0) right center no-repeat url("http://imageshack.com/a/img845/5814/75r3.png");
  }
  </code></pre>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/fEy9a/" rel="nofollow">Fiddle</a></p>
  
  <p>As you can see, it works great in Chrome and FF, but I can't get it to work for some reason in IE. Note that if you remove the image, it works, but it won't work with the image there.</p>
  
  <p>What's the issue and how do I fix it?</p>