Buenas.
Primero que nada muchas gracias a los dos por vuestras respuestas
Os dejo los fragmentos del codigo
Código HTML:
<div class="theme">
<div id="themebody">
<div id="head">..</div>
<div id="banner">..</div>
</div>
</div>
Los div en cuestion son el head y el banner. El problema es que la sombra del banner se pone encima del head.
Este es el css:
Código:
.theme #banner{
box-shadow: 0 0 100px black;
-webkit-box-shadow: 0 0 100px black;
-moz-box-shadow: 0 0 100px black;
width: 1002px;
margin: 0 auto;
}
Y esto venia ya con el sistema:
Código:
.theme #head {
margin-top:15px;
box-shadow:0 0 100px #000;
-webkit-box-shadow:0 0 100px #000;
-moz-box-shadow:0 0 100px #000;
border-radius:15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
}
He probado sustituyendo las sombras de banner y head por "-moz-box-shadow: 0 1px 3px #161616 , 0px -1px 3px #161616;" como me comento ZoroRoronoa y sigo con el mismo problema.
La verdad que llevo un par de dias mirando y remirando el codigo y no se que es lo que puede ser, ni porque pasa, ni como solucionarlo. Como ya he dicho he probado con los z-index y nada. He estado mirando el resto de los div de la web y por ejemplo el footer tiene sombra tambien y esta no se sobrepone al contenido del body. Y lo he hecho igual que con el banner y el head.
¿Alguien que sea capaz de aportarme un rayo de esperanza?
Muchas gracias de nuevo!
Un Saludo