Ayuda para resolver misterio

[Mikimoto74]

Hola. Necesito vuestra ayuda para resolver una cosa que me está trayendo de cabeza. El problema es el siguiente. Si visitais la siguiente web:

http://www.perfumes2008.com

vereis que con Firefox o con Opera, lo que es la cabecera de fondo negro, de id="header", y el menu principal, justo debajo, de class="menu" (lo hago class porque uso un menu idéntico más abajo), aparecen perfectamente.

Qué pasa en IE7? Pues que pasa algo raro entre estos dos bloques. La esquina inferior izquierda redondeada no aparece, y la opción derecha del menu aparece "invadida" por el fondo de la cabecera.

He estado haciendo averiguaciones, con el Firebug de FF, con el DOM Explorer de IE, y directamente mirando el código HTML, y pasa algo que no me puedo explicar:

- Mirando el código fuente, no hay ningún solapamiento de DIVs.
- En Firebug, ambos bloques "header" y "menu", tal y como demuestra el código fuente, están separados, al mismo nivel de jerarquía.
- En IE DOM Explorer en cambio, el bloque "header" cuando lo selecciono me engloba tanto "header" como "menu". Por qué IE7 me trata a "menu" como si estuviera dentro de "header"???

Alguna ayuda por favor? Estoy totalmente intrigado. Si no usais Firebug en FF ni algo similar a IE DOM Explorer en IE os pondré algo del HTML y el CSS para que lo podais ver, pero con estas extensiones supongo que lo podreis investigar perfectamente.

[Mikimoto74]

Por favor, una ayuda!

Pongo el HTML resultante en esa parte del documento y el CSS correspondiente, poniendo solo los estilos y propiedades que tienen que ver con la maquetación:

Código HTML:

<div id="header">
   	<div id="esquina_sup_izq"> 
		<div id="esquina_sup_der">
			<div id="esquina_inf_izq">
                 <div id="esquina_inf_der">
                      <div id="contenedorHeader">
                            <div class="right">
                                  <div class="currency">moneda&nbsp;
                                      <a href="/index.php?currency=USD"><img src="images/icon_currency1.gif" width="19" height="10" alt="" border="1"/></a>&nbsp;
                                      <a href="/index.php?currency=EUR"><img src="images/icon_currency2.gif" width="19" height="10" alt="" /></a>
      							   </div>
                                    <form action="advanced_search_result.php" method="get">
                                      b&uacute;squeda de producto:&nbsp;
                                        <input type="text" tabindex="1" class="input width1" name="keywords" />
                                        <input type="image" src="images/btn_search.gif" class="btn_search" />
                                    </form>
                            </div>
                            <a href="index.php"><img src="images/perfumes2008_storelog.gif" border="0" /></a>
                       </div> <!--de contenedorHeader-->
                  </div> <!--de esquina_inf_der-->
             </div> <!--de esquina_inf_izq-->
		</div> <!--de esquina_sup_der-->
	</div> <!--de esquina_sup_izq-->
</div> <!--de header-->
<div class="menu">
  	<ul class="es">
  		<li><a href="shop.php?cPath=1" class="first">Perfumes Mujer</a></li>
        <li><a href="shop.php?cPath=2" class="menuItem2">Perfumes Hombre</a></li>
        <li><a href="shop.php?cPath=6" class="menuItem3">Ofertas</a></li>
        <li><a href="shop.php?cPath=3" class="menuItem4">Sets de Regalo</a></li>
        <li><a href="shop.php?cPath=13" class="menuItem5">Maquillaje</a></li>
        <li><a href="shop.php?cPath=12" class="menuItem6">Cosm&eacute;tica</a></li>
        <li><a href="shop.php?cPath=9" class="last">Ba&ntilde;o & Aseo</a></li>
	</ul>
</div> 

Código HTML:

#header {
	clear:both;
}

.menu {
	clear:both;
	height:33px;
	line-height:33px;
}
.menu li { float:left; }
.menu li a {
	display:block;
	width:133px;
	height:33px;
	text-align:center;
}
#esquina_sup_izq {
	background-image:url(images/esquina_sup_izq.gif);
	background-repeat:no-repeat;
	background-position: top left;
}
#esquina_sup_der {
	background-image:url(images/esquina_sup_der.gif);
	background-repeat:no-repeat;
	background-position: top right;
}
#esquina_inf_izq {
	background-image:url(images/esquina_inf_izq.gif);
	background-repeat:no-repeat;
	background-position: bottom left;
}
#esquina_inf_der {
	background-image:url(images/esquina_inf_der.gif);
	background-repeat:no-repeat;
	background-position: bottom right;
}
#contenedorHeader {
	padding: 10px 6px 10px 16px;
}

Espero que alguien me pueda dar alguna pista sobre lo que ocurre.

[Mikimoto74]

Bueno, ya lo he solucionado yo mismo. Colocando la propiedad

overflow:hidden;

dentro de #header, deja de aparecer el error.


Ahora quisiera saber el por qué de esto. Por qué en FF, Opera, etc, no me hacía falta poner esto, y en IE7 sí. Alguien me lo podría explicar?