[SOLUCIONADO] 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

[pzin]

No deberías de usar tablas para eso, tampoco atributos ni etiquetas depreciadas/obsoletas como font, ni cerrar etiquetas tipo <p/>, ni inventarte cosas como float: center que direcamente no existe y si usas XHTML tienes que cerrar las etiquetas sin cierre con <*/>.

[samu747]

Vale Pzin, ya dije que se me iba la mano con el <font> porque yo aprendí asi y es algo que se me quedo pillado, ya que hay cosas que con <span> o <strong> no funcionan y no sabia como aplicarlo... vale, despues de arreglar todo lo que me dijistes incluso cambiar el Float que pense que existia pero no, asi que lo cambie a float:left, el problema no se habia solucionado, me he fijado que en chrome la letra es 1px de altura más pequeño que en Firefox, así que aunque pusiese la etiqueta o css que pusiese siempre quedaba 1 pixel de espacio menos de altura en el Chrome.

Finalmente lo he solucionado, poniendo las letras de arriba de la imagen dentro de un <div> con un class para el estilo css, añadiendole position:absolute y metiendole 3 <br> a la imagen para que bajase el espacio de las letras, y ahora si, encaja perfecto en los 2 navegadores y ya no se descuadra nada, gracias por la ayuda de todas formas, si deberia de limpiar un poco mas el codigo ya que es una web que hice cuando estaba aprendiendo en clase y hay muchas cosas que no sabia, como es tan grande me da pereza cambiarlo todo de nuevo por un CSS si funciona bien, tiene fallos con etiquetas obsoletas y cosas que no sabia, pero bueno las ire arreglando con el tiempo, en la página utilizo una tabla central y unas capas en el lado Izquierdo y Derecho como menus, parecido a un blog, por eso utilicé la tabla en su momento y normalmente me va bien, quería meter eso dentro de un <td> por que si lo pongo en la imagen el enlace no se pone en la celda completa, sino en la imagen nada mas, y me interesaba que fuera en la celda entera :)

Espero que le sirva a otro, la mayoria de los descuadres es por culpa de las letras... y de los BRs modificando la altura, que en firefox funciona pero en Chrome estan Bugueados:

<br style="line-height: 20px">

Un saludo y gracias por comentar.