Jquery Slider appearing ok in Chrome but not in Firefox

Question

I have this personalised jquery slider which works very well in Chrome,but when I open my website in Firefox or IE,the images get huge and the lines I added in the slider gets overlapped.Can you please help me?

HTML Code:
<h1>Daily Deals</h1>
<div id="mi-slider" class="mi-slider">
<ul>
   <li>
<table border="0" cellspacing="0" cellpadding="0" class="jquery_table">
<tbody>
<tr>
<td>
<CENTER>
<a href="#"><img src="#" alt="img11"><h4 >test</h4></a></CENTER>
<img src="#" alt="#">
<hr width="130%">
   </li>
</td>
</tr>   

           <tr align="center" valign="center">
                    <td>WAS:</td>
                    <td class="strikethrough">$179.95</td>
                  </tr>
                <tr>
                    <td>YOU SAVE:<hr width="130%"></td>
                    <td>$40.00<hr width="100%"></td>
                </tr>
<tr>
<td><a rel="nofollow" href="#"><h2 align="right" valign="top" font-size="20px" font color="#006CCE" font-style="normal">$130.95</h2></a></td>
</tr>
</tbody>
</table>
</ul>
<nav>
    <a href="#">Shoes</a>
    <a href="#">Accessories</a>
    <a href="#">Watches</a>
    <a href="#">Bags</a>
</nav>
</div>

The above is only part of the code.It works fine on Chrome,so there is no problem with the coding according to me, but I dont know why it doesnt work in Firefox.If you need anything more,please feel free to ask. The website link is www.dailycrazydeals.com

Answer 1

This fixed it on Firefox for me. Didn't check IE:

.mi-slider ul li img {
    width: 100%;
}

FYI, I have no idea why Firefox/IE would be doing this when other browsers don't. For this reason I always start my css by using some version of a reset file (eg http://meyerweb.com/eric/tools/css/reset/ ). That does a good job in removing many (but not all) browser inconsistencies.