开发者

Button not working in IE, fine in Firefox/Opera/Chrome

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.

The 'prev' button is visible, but not clickable. The 'next' button is fine.

My carousel on my site: http://carolineelisa.com/TITTB/html/carousel.html

EDIT: The client's site: http://www.tittb.org/

The code:

<div id="hasJavaScript" style="display: none">
  <button type="button" class="prev"></button>
  <div class="carousel">
    <ul>
开发者_Python百科      <li><img src="images/carousel_thumb_2.jpg" alt="" width="190" height="105" class="carousel-item-2"></li>
      <li><img src="images/carousel_thumb_3.jpg" alt="" width="190" height="105" class="carousel-item-3"></li>
      <li><img src="images/carousel_thumb_4.jpg" alt="" width="190" height="105" class="carousel-item-4"></li>
      <li><img src="images/carousel_thumb_5.jpg" alt="" width="190" height="105" class="carousel-item-5"></li>
      <li><img src="images/carousel_thumb_1.jpg" alt="" width="190" height="105" class="carousel-item-1"></li>
    </ul>
  </div>
  <button type="button" class="next"></button>
</div>

The CSS

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;
}


Use <input type="button" /> instead of <button type="button"></button>

You'll have to change the word button in your CSS as well. it'd be input.prev and input.next then

Quote from W3Schools:

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.


You can use firebug and can able to see whats going on under the hood however there is a strong chance that you are facing this scenario CSS Problem behind content not clickable

I believe that there is nothing to do with input type="button" or button type="button"

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜