Encajar un div dentro de otro

#1 (**permalink**) 09/03/2011, 11:55

Hola,

Tengo el siguiente problema. Tengo una imagen 800x600 (foto1) a la que se le ha hecho un recorte interior de 100x50 a modo de hueco (foto2). Al montar la página quiero encajar foto2 dentro de foto1 y así volver a montar la imagen original. Y tengo el siguiente código:

Código HTML:

<body>
<div id="caja1">
	<div id="caja2"></div>
</div>

Y el css:

Código:

body{
    position:relative;
    text-align:center;
    width:800px;   
    height:600px;
}
#caja1{
    position:relative;  
    width:800px;   
    height:600px; 
    background-image:url(foto1.jpg);
}
#caja2{
	position:absolute;
	top:132px;
	right:34px;
	width:100px;
	height:50px;
	background-image:url(foto2.jpg);	
}

Si visualizo la página a tamaño normal (zoom 100%) se ve perfectamente, pero si empiezo a aumentar (o disminuir) el zoom se ve que los divs (y por tanto las imágenes) no encajan perfectamente, pues aparece un pequeño borde alrededor de caja2. He probado algunas cosas (border 0, border hidden, margin 0, margin hidden) pero no se arregla.

A ver si alguien sabe como solucionarlo.