Capa que no se ajusta al contenido (en IE y FF)

harvey · #1 (**permalink**) 15/06/2009, 09:26

Tengo un pequeño problemita en una web asi que hice unas pruebas con el siguiente código;

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/caja.css">
	</head>
	<body>
		<div class="caja">
		<image src="images/libros.jpg">
		</div>
	</body>
</html>

Código:

.caja{
background-color:pink;
width:500px;
position:relative;
}

Pues bien la cosa es que en IE esto me saca la capa en color rosa un poco mas alta que el alto de la imagen. Ahora bien, si cierro la capa en la misma linea que esta la etiqueta de la imagen esto desaparece;

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/caja.css">
	</head>
	<body>
		<div class="caja">
		<image src="images/libros.jpg"></div> <!-- AQUI -->
	</body>
</html>

El problema es que en el documento original textos y la cosa se complica como sigue; si voy a poner texto y pongo align="left" a la imagen en IE se ajusta a la imagen, ahora si pero en cambio en Firefox la capa de color rosa desaparece completamente. Asi que le pongo la linea de texto en parrafo de esta manera;

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/caja.css">
	</head>
	<body>
		<div class="caja">
		<image src="images/libros.jpg" align="left">
		<p>Hola Mundo</p>
		</div>
	</body>
</html>

En esta forma en Firefox la capa rosa aparece pero se reduce al "Hola Mundo".
¿Como puedo evitar que me salga ese espacio adicional que me salia en IE y como hago para que la capa en Firefox se ajuste al tamaño de la foto y el texto? (sin darle un heigh fijo, claro)

Mikmoro · #2 (**permalink**) 15/06/2009, 09:50

Antes de seguir, la etiqueta de la imagen debe estar cerrada:
<image src="images/libros.jpg" />

Haz eso y mira si algo cambia.

harvey · #3 (**permalink**) 15/06/2009, 11:43

Sigue igual cerrando la etiqueta.

Mikmoro · #4 (**permalink**) 15/06/2009, 12:36

Ok, ahora pasemos al problema (pero déjala cerrada, no obstante, que es como debe ser).

Prueba a añadir a .caja un overflow: auto;

harvey · #5 (**permalink**) 17/06/2009, 09:13

Efectivamente con overflow:auto se arregla el problema en Firefox.
Sin embargo ¿es esto normal? ¿Que la capa necesite la propiedad overflow para adaptarse al tamaño del contenido?

Mikmoro · #6 (**permalink**) 17/06/2009, 10:03

Cita:

Iniciado por harvey

sin embargo ¿es esto normal? ¿que la capa necesite la propiedad overflow para adaptarse al tamaño del contenido?

sí.

harvey · #7 (**permalink**) 18/06/2009, 03:20

Ok. Muchas gracias por tu ayuda.