capas dentro de capas explorer

trevol · #1 (**permalink**) 07/10/2010, 17:58

Hola amigos tengo tres capas una contenedora y otras dos contenidas en esta. Por que internet explorer cuando intento cubrir con algunas de las otras capas el width de la principal esta crece en la misma proporción y nunca puede ser cubierta? ¿como puedo solucionarlo?

Muchas cracias, saludos.

alexk · #2 (**permalink**) 07/10/2010, 18:28

emmm ah?

CesarSepulvedaG · #3 (**permalink**) 08/10/2010, 00:11

Explicate un poco mejor para ayudarte de una mejor manera amigo.

trevol · #4 (**permalink**) 08/10/2010, 03:10

CesarSepulvedaG, alexk, muchas gracias teneis razón lo suyo es postear codigo, haber si podeis ayudarme chicos:

Código CSS:

Ver original<style type="text/css">
*
{
margin: 0; 
padding: 0;
position:absolute;
 
}
.contenedora
{
background:  #e5edf7;
padding: 10px;
margin-top:20px;
margin-left:200px;
margin-rigth:300px;
width: 800px;
height: 700px;
border: 1px solid black;
}
.contenida1/*la de color azul*/
{
 
position:relative;
margin-top:-48px;
margin-left:-11px;
margim-rigth:0px;
width: 119px;
height: 48px;
background:#006ab3;
border: 1px solid black;
}
.contenida2/*la de color amarillo*/
{
position:relative;
margin-top:-11px;
margin-left:108px;
width: 700px;
height: 47px;
background:#ffd800;
border: 1px solid black;
}
</style>

Código HTML:

Ver original<body>
<div class="contenedora">
<div class="contenida2"></div>
<div class="contenida1"></div>
</div>
</body>
</html>

Lo que me gustaría es que la capa contenida2, me cubra todo el whidth de la capa contenedora menos la capa contenida1. En google chrome perfecto pero no en internet explorer. Al fin lo que me gustaría es que se viera igual que en google chrome.

kseso? · #5 (**permalink**) 08/10/2010, 06:19

¿A qué versión de ie se refiere?
Porque son publicas y notorias las diferencias entre las coexistentes: 6, 7, 8 y la beta del 9.

De todas formas, en un vistazo muy rápido y superficial a su código:
Nunca definiría en el selector universal /*/ esto: /position:absolute;/ excepto el tener una razón muy poderosa y particular para algo muy expecífico.
Declare las propiedades en la forma acortada: /margin: Npx Xpx Ypx Zpx;/ <- sentido de giro horario comenzando por el superior.
No acierto a comprender qué pretende lograr con los valores de los márgenes en /.contenedora/ ¿centrarla en la horizontal, quizás?
Y lo más importante, repase el modelo de caja estándar y el que implanta ie (que no es el estandar).

Y para terminar, ¿qué quiere lograr? ¿1 caja centrada en la horizontal con un header superior en ella dividido en otras dos secciones?

trevol · #6 (**permalink**) 08/10/2010, 06:26

Muchas gracias kseso?, ejecuta el código si no es mucha molestia y veras exactamente lo que me gustaría, me harías un gran favor, me has ayudado muchas veces.

Cita:

Y para terminar, ¿qué quiere lograr? ¿1 caja centrada en la horizontal con un header superior en ella dividido en otras dos secciones?

Exacto y esas dos sesiones son capas. En chrome y firefox se ve perfecto pero no en internet explorer, gracias saludos!

Rafael · #7 (**permalink**) 08/10/2010, 06:33

Hola Trevol.
El concepto "Capas" no es el más adecuado, en realidad es un concepto equivocado que utiliza Dreamweaver como analogía a lo que hace el Photochop.

Estas llamadas capas son más bien divs, quizá unos dentro de otros, o quizá con propiedades z-index, o atributos de posición, cosas que los hacen estar "arriba" o abajo, uno del otro. Quizá eso te ayude a identificar lo que está sucediendo en tu caso.

Un div normalmente está contenido dentro de otro, pero sí puede ser cubierto en su totalidad incluso rebasado, jugando con propiedades como position: absolute.

trevol · #8 (**permalink**) 08/10/2010, 06:56

Conocia el concepto, Rafael, de todas formas gracias.

trevol · #9 (**permalink**) 08/10/2010, 10:19

Gracias a todos chicos parece que mi problema reviste dificultad, bueno me lo tomaré como reto. Postearé solución si la encuentro.

jomaruro · #10 (**permalink**) 10/10/2010, 03:28

Hola:

No has indicado todavía a que versión de IE te refieres y no tengo Chrome, pero en Firefox y en IE8 lo veo igual.

En el código que has posteado más arriba tienes un ligero problema con los margin-right. En uno pones margim y en los dos rigth en lugar de right.

Saludos.