Buenas!
Miren, tengo un problema y después de horas y horas intenando buscar solución he optado por pedir ayuda... les explico
tengo esto:
<div id="alrededor1">
<div id ="alrededor2">
<div id="contenedor">
<!-- CONTENIDO -->
</div>
</div>
</div>
CSS:
html, body{
height:100%;
}
#alrededor1 {
margin: auto;
width: 854px;
min-height: 100%;
background: white url("../img/borde_contenedor_i.png") repeat-y left;
}
#alrededor2 {
min-height: 100%;
width: 827px;
margin-left: 27px;
background: white url("../img/borde_contenedor_d.png") repeat-y right;
}
#contenedor {
width: 800px;
margin-right: 27px;
}
Que consigo con esto? Pues tener unos borde derecho y izquierdo con difuminado. El problema? En firefox parece que la propiedad min-height toma como referencia su contenedor a la hora de usar porcentajes, como el porcentaje no está definido toma como referencia el tamaño de #contenedor ya que es el que empuja hacia abajo todas las capas. #alrededor1 me toma el min-height correctamente ya que su contendor(body) es tan alto como la pantalla. Pero #alredodor2 es tan alto como #contenedor por lo anteriormente dicho. Tampoco puedo ponerle a #alrededor1 el height a 100% porque entonces ya no hace caso del min-height y si el contenido excede del tamaño de la pantalla el borde difuminado no llegará hasta abajo.
Ayuda porfavor!! desesperacion!!!