Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Rollover de Imagenes en un <td>, funciona en Firefox y se descuadra en Chrome en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/04/2014, 00:25
 
Fecha de Ingreso: enero-2014
Ubicación: Canarias
Mensajes: 16
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta Rollover de Imagenes en un <td>, funciona en Firefox y se descuadra en Chrome

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

Última edición por samu747; 08/04/2014 a las 00:35
  #2 (permalink)  
Antiguo 08/04/2014, 08:45
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Rollover de Imagenes en un <td>, funciona en Firefox y se descuadra en Chr

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 <*/>.
  #3 (permalink)  
Antiguo 08/04/2014, 17:14
 
Fecha de Ingreso: enero-2014
Ubicación: Canarias
Mensajes: 16
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Rollover de Imagenes en un <td>, funciona en Firefox y se descuadra en Chr

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.

Etiquetas: compatibilidad, imagenes, navegadores, rollover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:55.