Foros del Web » Creando para Internet » CSS »

Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

Estas en el tema de Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo. en el foro de CSS en Foros del Web. Hola a todos: Vereis estoy haciendo una web y necesitaba un código que me mostrase en forma de popup una imágen. Un usuario de este ...
  #1 (permalink)  
Antiguo 17/04/2008, 13:40
 
Fecha de Ingreso: febrero-2002
Mensajes: 351
Antigüedad: 15 años, 10 meses
Puntos: 19
Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

Hola a todos:

Vereis estoy haciendo una web y necesitaba un código que me mostrase en forma de popup una imágen.

Un usuario de este foro me indicó la siguiente web que era lo que yo buscaba:
http://www.xyberneticos.com/index.ph...genes-con-css/

Yo todo féliz y contento copio el código en mi web, pero he aquí que me doy cuenta de un problema. Probad el efecto tanto en Internet Explorer 7 como en Mozilla Firefox.

Como vereis se produce un desplazamiento al posicionarnos sobre la imágen. Este desplazamiento en Internet Explorer me funciona perfecto, pero en Mozilla hace algo super extraño.

Como vereis el código CSS indica lo siguiente:
Código:
.thumbnail:hover span {      /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px;          /*position where enlarged image should offset horizontally */
}
Pues bien, a mi parecer Internet Explorer lo hace correctamente, ya que indica que el TOP debe estar a 0. Y lógicamente lo deja a esa altura por la parte de arriba.
Pero Firefox no hace eso, sino que pone la altura de la imágen en donde le da la gana.
Por cierto, que la propiedad LEFT a 60px la respetan ambos correctamente.

Viendo este problema se me ocurrió incluir un hack, pero la verdad que no se donde tendría que colocarlo para establecer en ambos navegadores una altura distinta para cada uno (para que se posicionen en altura ambos correctamente, dandoles valores distintos a cada navegador).

¿Alguien sabe como solucionar este problema? Y sino sabeis como solucionarlo, ¿me podríais indicar como establecer un hack en el código que me solucione el problema?

Muchas gracias por adelantado.
  #2 (permalink)  
Antiguo 17/04/2008, 15:45
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
Re: Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

Has intentado poniendo: "position:absolute" ???

Saludos
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 18/04/2008, 06:01
 
Fecha de Ingreso: febrero-2002
Mensajes: 351
Antigüedad: 15 años, 10 meses
Puntos: 19
Re: Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

Hola baccxus, gracias por tu respuesta.

La verdad que ya he probado de todo, incluso lo de position: absolute.

Al final tendré que tirar de un hack o cambiar el método de mostrar la imágen porque ya he leido que este método le falla a mucha gente

Si lo logro solucionar postearé el código, aunque lo veo difícil.

Un saludo a todos.
  #4 (permalink)  
Antiguo 18/04/2008, 06:10
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

¿Y cuál es exactamente el problema? Sin ver tu código es difícil saberlo.

Me juego algo a que se debe al posicionamiento del contenedor de ese popup.

Mikel.
  #5 (permalink)  
Antiguo 18/04/2008, 06:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema con posición en IE y Mozilla. Parece fácil, pero no logro solucionarlo.

Prueba este código:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Cien por cien de alto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#contenedor {position: relative;
}
.thumbnail{ z-index: 0;
text-decoration: none;
}
.thumbnail:hover { background-color: transparent;
z-index: 1;
}
.thumbnail span {
padding: 5px;
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0;
}
.thumbnail:hover span { visibility: visible;
top: 0px;
left: 60px;
}

</style>
</head>

<body>
<div id="contenedor">
<a href="http://www.xyberneticos.com/" class="thumbnail"><img src="http://img513.imageshack.us/img513/173/foto1ee2.jpg" border="0" height="150" width="200"><span><img src="http://img513.imageshack.us/img513/173/foto1ee2.jpg"><br>
Aqui puedes añadir una pequeña referencia de la foto </span></a></div>
</body>
</html>
A ver qué tal.

Mikel.
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 19:28.