Rollover de Imagenes en un <td>, funciona en Firefox y se descuadra en Chrome

[samu747]

Hola, tengo un problema en la web, me he tirado buscando mas de 6 horas probando diferentes métodos y en todos acabo en el mismo punto, he creado un rollover de 2 imagenes encima de un <td>, os dejo una imagen que lo explica todo :)



Bien, el código que utilizo es éste en el head de CSS:

Código:

	#imagen {
			float: center;
			background: url(./imagenes/efectoblanco.png) no-repeat;
			height: 333px; //el alto original de la imagen1
			width: 170px; //el ancho original de la imagen1
		}
		#imagen:hover {
			background: url(./imagenes/efectodorado.png) no-repeat;
			height: 333px; //el alto original de la imagen2
			width: 170px; //el ancho original de la imagen2
		}

Y éste en la celda de la tabla:

Código:

<td style="border:1px solid blue; cursor:pointer; width:170px; padding-left: 2px;" href="#tomo74box" id="tomo74efect" class="cambiocolor" >
	<div id="imagen"><font color="white"><font size="6">Tomo 74<br></font><font size="5">(734-7??)</font></font><br>
	<img src="http://imageshack.com/a/img132/7171/ihjb.jpg" Width="130" Height="205"><p/>Ver Online</div>
</td>

Que es lo que puede ocurrir? ya es que he tirado todo por la borda.... si no consigo arreglarlo ahora lo quitaré!

(Perdonen las etiquetas <font>, se que estan desfasadas pero es mania XD)

Espero haberme expresado correctamente y puedan ayudarme

Un Saludo

Samu