Buenas Foreros!!
Tengo una duda en CSS, llevo tiempo intentando buscar una respuesta clara.. aver si pueden ayudarme.
Primero el ejemplo en concreto.
Código:
body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}
Probarlo utilizando el FIREFOX, comprobarán que la "subcapa" arrastra la "capa_principal". Se supone que la "capa_principal" deberia quedar a 5px del margen superior, mientras que la "subcapa" a 20px del margen superior de la "capa_principal", verdad??.
Utilizando el IE (Interner Explorer) al menos en la versión 6, se ve correctamente.
Volviendo al Ejemplo:
Código:
body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
border:1px solid #000; /* Linea recien añadida */
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}
He agregado un borde simple a la "capa_principal", volver a comprobar el ejemplo en FireFox. Ahora, se debería ver correctamente, como en IE.
¿Por qué? Tan solo agregue un borde a la "capa_principal".
El problema es que en mi plantilla no debo agregar dicho borde, entonces pasa como al principio.
Nta: Si quitan el margen:0 de la etiqueta H1, también arrastrará la "capa_principal", siempre que esta no tenga el borde definido.
Alguien puede darme una respuesta clara, del ¿Por qué?.
Gracias ;).