Problema con IE7: tamaño objectos

josimapi · #1 (**permalink**) 08/01/2008, 05:29

Hola a todos!!

Tengo un problema, necesito hacer con CSS objectos de tamaño muy pequeño, porque mi página web lo requiere, y he encontrado un problema de mal funcionamiento de IE7. El problema es que por alguna misteriosa razón IE7 no pinta objectos creados desde CSS cuya altura sea menor de 12px. Curiosamente la anchura parece respetarla. Si abrís el siguiente código html con Firefox2 veréis la diferencia.

Código:

<html>
<head>
<style type="text/css">
	<!--
	.color {
	    background-color: yellow; width: 8px; height: 8px; display: block;
	}

	.color:hover {
	    background-color: red; 
	}

	.contenedor {
   	 background-color: #313031; width: 8px; height: 8px; margin: 0 1px; float: left; 
	}
	-->
</style>
</head>
<body>

<div class="contenedor">
	<a class="color" href="#"></a>
</div>

<div class="contenedor">
	<a class="color" href="#"></a>
</div>

</body>
</html>

Muchas gracias por todo!

JavierB · #2 (**permalink**) 08/01/2008, 08:17

Hola josimapi. Bienvenido al foro.

Pon un DOCTYPE y te debería funcionar bien.

Saludos,

josdelaranda · #3 (**permalink**) 08/01/2008, 08:56

Hola, podrías intentar poniendo lo siguiente:

Código:

.contenedor {
   	 background-color: #313031; 
	 width: 8px; 
	 height: 8px; 
	 margin: 0 1px; 
	 float: left; 
	 line-height:8px; 
	 font-size: 0;
	}

Saludos

K-Yezaad · #4 (**permalink**) 08/01/2008, 11:02

Como mencionaron arriba, IE no respeta por default CSS 2.0, tienes que declarar un doctype para que IE7 "entienda" lo que debe hacer.

josimapi · #5 (**permalink**) 09/01/2008, 03:46

Muchisimas gracias por las respuestas!! Me han funcionado ambas opciones. Da gusto formar parte de un grupo como este!