solapamiento div a img

ferran_ · #1 (**permalink**) 08/01/2008, 03:42

Hola a tod@s, tengo este código, me funciona en IE7 y en Firefox, pero como no... en IE6 no...alguna sugerencia?

Código:

<div id="imatge" style="left:13px;"><img src="img/hostal_audade.jpg" width="330" height="345" /><div style="position:relative;background:#FFF;left:0px; height:45px;top:-45px;"></div></div>]

ferran_ · #2 (**permalink**) 08/01/2008, 06:16

Perdon, lo expongo mejor, mi idea es que un div se solape a un img. El div que quiero que se solape esta dentro del div donde está la imagen.

#imatge{
float:left;
width:331px;
height:345px;
}

<div id="imatge">
<img src="http://www.sponge.es/af2/img/hostal_audade.jpg" width="330" height="345" />
<div style="position:relative;background:#FFF;left:0px; height:45px;top:-45px;"></div>
</div>

En Explorer IE7 y en firefox, se solapa bien, pero en IE6 me deja un espacio que es en principio el que ocupa el div que quiero solapar.

Aquí podéis ver a que me refiero: http://www.sponge.es/af2

Ruyman · #3 (**permalink**) 10/01/2008, 03:06

He estado mirándolo y creo que ya lo solucionaste, porque en ambos exploradores lo veo igual, ¿no?

Saludos

hades87 · #4 (**permalink**) 10/01/2008, 09:22

mira si con esto anda bien ^^

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#imatge{
margin: -8px;
float:left;
width:331px;
height:345px;
}

#estilo{
position:relative;
background:#FFF;
left:0px; 
height:45px;
top:-45px;
}
</style>
</head>

<body>
<div id="imatge">
<img src="http://www.sponge.es/af2/img/hostal_audade.jpg" width="330" height="345" />
<div id="estilo"></div>
</div>
</body>
</html>

ferran_ · #5 (**permalink**) 10/01/2008, 12:47

Ei, muchas gracias, pero lo he probado en el IE6 que es el navegador que me interesa ya que to dios lo usa, y nada, no se porque, posiciona la capa bien, pero duplica el espacio como si hubiese la misma capa debajo...

Si te fijas y entras a http://www.sponge.es/af2/prova.html veras que crea un espacio debajo de la capa, se ve seleccionandolo todo que es lo que hace que me descuadre las medidas ya que me aumenta el tamaño del div :(

hades87 · #6 (**permalink**) 10/01/2008, 13:56

mmm en la página que me pasaste no acabo de ver el problema

ferran_ · #7 (**permalink**) 11/01/2008, 02:08

Ok, míralo ahora que le he puesto bordes para que se vea lo que te explico. En IE6 el div se hace mas largo porque duplica el espacio de la capa que solapa a la imagen, mientras que en firefox, como no, todo va ok.