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"
精彩评论