Foros del Web » Creando para Internet » CSS »

Ayuda para resolver misterio

Estas en el tema de Ayuda para resolver misterio en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/02/2008, 12:32
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 12 años, 11 meses
Puntos: 2
Exclamación Ayuda para resolver misterio

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.
  #2 (permalink)  
Antiguo 26/02/2008, 14:08
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 12 años, 11 meses
Puntos: 2
Re: Ayuda para resolver misterio

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.
  #3 (permalink)  
Antiguo 27/02/2008, 01:54
Avatar de Mikimoto74  
Fecha de Ingreso: enero-2005
Mensajes: 88
Antigüedad: 12 años, 11 meses
Puntos: 2
Re: Ayuda para resolver misterio

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?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:11.