i'm having a issue when using css to hover and change my tabs. The code i use is below. It works fine and all but for some reason it moves my slices to the right. Oddly it work perfectly fine on chrome but on firefox and IE it looks F'ed up (some of the slices were shifted to the right). Anyone know a solution or another method of coding hover purely through css or html? I dont want to use JavaScript as css has a faster load time.

HTML
<td><div id="home">
<a href="DriversAcademy.html">
<img src="images/DriversAcademy_04.png" alt="description" width="83" height="49"/>
<img id="homereplace" src="images/hoverhome.png" alt="description" width="83" height="49"/></a></div></td>


CSS
#home a #homereplace,
#home a:hover img
{
display: none;
height: 49px;
width: 83px;
}

#home a:hover #homereplace,
#home a img
{
display: block;
height: 49px;
width: 83px
}