unwanted CSS sprite border in FireFox
===

I'm trying to use the css sprites technique to recreate a good rollover effect. 
Until now I was able to achive this result http://iltuttologo.com/index.php/abarabino 
When you pass with the mouse over the city, the image is replaced with a night versiont of that and everything works good except that on firefox I have an unwanted central border. 

This is the css that I've used : 

			@charset "utf-8";
			/* CSS Document */
			
			#mondo   {
			  border: none;
			  border: hidden;
			}
			.tab {
			  width: 840px;
			  padding: 0px;
			  margin: 0px;
			
			}
			.tab td {
			  display: inline-block;
			  padding: 0px;
			  margin: 0px;
			  width: 420px;
			}
			a.evento1 {
			  display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px 0px no-repeat;
			float: left;
			  border: none;
			}
			a.evento1:link {
			  display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -780px no-repeat;
			float: left;
			  border: none;
			}
			a.evento1:hover {
			  display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px 0px no-repeat;
			float: left;
			  border: none;
			}
			a.evento2 {
			  display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px 0px no-repeat;
			float: left;
			  border: none;
			}
			
			a.evento2:link {
			  display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px -780px no-repeat;
			float: left;
			  border: none;
			}
			
			a.evento2:hover {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px 0px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3 {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3:link {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -1040px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3:hover {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento4 {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento4:link {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px -1040px no-repeat;
			float: left;
			  border: none;
			}
			a.evento4:hover {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) -420px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3_extra {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3_extra:link {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -1040px no-repeat;
			float: left;
			  border: none;
			}
			a.evento3_extra:hover {
			display: block;
			  height: 520px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -260px no-repeat;
			float: left;
			  border: none;
			}
			a.evento5 {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -520px no-repeat;
			float: left;
			  border: none;
			}
			
			a.evento5:link {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -1300px no-repeat;
			float: left;
			  border: none;
			}
			a.evento5:hover {
			display: block;
			  height: 260px;
			  width: 420px;
			text-indent:-9999px;
			background:url(../images/sprite.png) 0px -520px no-repeat;
			float: left;
			  border: none;
			}


And in the main htlm page I've putted a table that loads the css above. Here you are also the html page: 

            <table id="mondo" style="margin-left: auto; margin-right: auto; margin-top: 15px;">
            <tbody>
            <tr class="tab">
            <td><a class="evento1" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Tiziana 50th Birthday" /></a></td>
            <td><a class="evento2" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Tiziana &amp; Adriano Wedding" /></a></td>
            </tr>
            <tr class="tab">
            <td><a class="evento3" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Adriano 70th Birthday" style="float: left;" /></a><a class="evento5" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Adriano 60th Birthday" style="float: left;" /></a></td>
            <td><a class="evento4" href="index.php/abarabino/new-york"><img src="images/trasparent_background_520.gif" border="0" alt="Tiziana 60th Birthday" /></a></td>
            </tr>
            </tbody>
            </table>


I can get a good visualization in Chrome, IE9, Safari but in Firefox I have the unwanted space. 

Can you help me to understand why I have this behaviour on Firefox?