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)