title: Button not working in IE, fine in Firefox/Opera/Chrome
body: <p>I had a simple carousel working on my site, but once my code was inserted into a client's system (force.com) something has prevented a button from working in IE.</p>
  
  <p>The 'prev' button is visible, but not clickable. The 'next' button is fine.</p>
  
  <p>My carousel on my site: <a href="http://carolineelisa.com/TITTB/html/carousel.html" rel="nofollow">http://carolineelisa.com/TITTB/html/carousel.html</a></p>
  
  <p>EDIT: The client's site: <a href="http://www.tittb.org/" rel="nofollow">http://www.tittb.org/</a></p>
  
  <p>The code:</p>
  
  <pre><code>&lt;div id="hasJavaScript" style="display: none"&gt;
    &lt;button type="button" class="prev"&gt;&lt;/button&gt;
    &lt;div class="carousel"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;img src="images/carousel_thumb_2.jpg" alt="" width="190" height="105" class="carousel-item-2"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/carousel_thumb_3.jpg" alt="" width="190" height="105" class="carousel-item-3"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/carousel_thumb_4.jpg" alt="" width="190" height="105" class="carousel-item-4"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/carousel_thumb_5.jpg" alt="" width="190" height="105" class="carousel-item-5"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images/carousel_thumb_1.jpg" alt="" width="190" height="105" class="carousel-item-1"&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;button type="button" class="next"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>button.prev {
  background: url("carousel_arrow_left.gif") no-repeat scroll left center transparent;
  width: 23px;
  height: 105px;
  float: left;
  padding:0;
  margin:0;
  }
  button.prev:hover {
      background-position: -30px center;
  }
  button.next {
      background: url("carousel_arrow_right.gif") no-repeat scroll 5px center transparent;
      width: 15px;
      height: 105px;
  padding:0;
  margin:0;
  }
  button.next:hover {
  background-position: -25px center;
  }
  </code></pre>