kseso? gracias por la respuesta. Pensé que nadie le pondría importancia al tema porque al parecer es algo básico de CSS, pero ya que al no ser mi campo se convierte en algo difícil jeje.
en cuanto a
Cita: pero de esta forma me queda así (solo las sombras superior, sombra izquierda, contenido y sombra derecha en escala):
me referia a que solo había incluido esos divs en el diseño.
Te comento que probé quitándole los float, pero los divs quedaban uno debajo del otro. Así que tuve que dejarles el atributo.
moisesra en efecto, las sombras superior e inferior son una sóla imagen. Pero tu consejo de colocar los divs de tal forma que se repitan en y me dieron el punto clave para la solución (y te cuento que en mozilla, IE8 e IE7 se ven muy, muy muy parecidos, solo por algunos detalles que se pueden solucionar con unos <!--[if IE 8]>).
Esta es la imagen de cómo me quedó en layout (los colores solo son para efecto de distinguir las partes
):
Y aquí esta el código (sólo lo del Contenido):
Código:
#SombraSuperior{
clear:both;
background-image:url(images/shadowntop.png);
background-repeat:no-repeat;
background-position:left;
margin-left:-8px;
background-color:transparent;
height:24px;
width:962px;
}
#SombraIzquierda{
float:left;
clear:both;
z-index:2;
width:20px;
background-image:url(images/shadownleft.png);
height:/*100%;*/200px;
margin-left:-17px;
background-repeat:repeat-y;
}
#Cuerpo{
float:left;
left:2px;
width:940px;
height:100%;
/**/background-color:#06C;
margin-top:-5px;
left:33px;
}
#SombraDerecha{
float:right;
z-index:2;
background-image:url(images/shadownright.png);
width:10px;
height:/*100%;*/200px;
right:22px;
background-repeat:repeat-y;
margin-right:-9px;
}
#SombraInferior{
clear:both;
background-image:url(images/ShadownBottom.png);
height:24px;
width:964px;
background-repeat:no-repeat;
background-position:top;
margin-top:-5px;
margin-left:-9px;
}
Código:
<div id="SombraSuperior"><!-- Inicio SombraSuperior -->
</div><!-- Fin SombraSuperior -->
<div id="SombraIzquierda"><!-- Inicio SombraIzquierda -->
</div><!-- Fin SombraIzquierda -->
<div id="Cuerpo"><!-- Inicio Cuerpo -->
Probando Texto<br />
Probando texto<br />
</div><!-- Fin Cuerpo -->
<div id="SombraDerecha"><!-- Inicio SombraDerecha -->
</div><!-- Fin SombraDerecha -->
<div id="SombraInferior"><!-- Inicio SombraInferior -->
</div><!-- Fin SombraInferior -->
Gracias por su ayuda, de no haber preguntado, seguramente estaría a punto de tirar la toalla. Saludos...