Question

The last attribute in the .main-container class is the drop shadow. It works if I manually enter it via firebug, but for some reason it doesn’t work at all normally.

HTML :

<div class="main-container"></div>

CSS :

.main-container{
    background-color:black;
    background: #c9ddf0; /* Old browsers */
    background: -moz-linear-gradient(top,  #c9ddf0 0%, #acc7e0 50%, #98bad9 51%, #6a9fd1 100%, #6a9fd1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9ddf0), color-stop(50%,#acc7e0), color-stop(51%,#98bad9), color-stop(100%,#6a9fd1), color-stop(100%,#6a9fd1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* IE10+ */
    background: linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9ddf0', endColorstr='#6a9fd1',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px; 
    border:solid 1px #879eb4;
    width:600px;
    height:600px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-300px;
    margin-left:-300px;
    text-align:center;
    box-shadow:0px px 10px 10px rgba(0,0,0,1);
}

Demo : http://jsfiddle.net/Mfkj4/28/

Does anyone have a css based solution for this?

Answer 1

You were missing a number in your box-shadow rule. It said px instead of 0px. Live example http://jsfiddle.net/Mfkj4/30/:

box-shadow: 0px 0px 10px 10px rgba(0,0,0,1);