Question

My css code below is to create a drop shadow around the main frame on my website, it works just fine on all browsers except IE. I found a “solution” for it online, applied it and it worked except for one issue. On the menu the top line broke (right before “Est.2009” the top line that makes the menu stops as well as in the end you can see a new box was created because it cut off. It also seems to be displaying a shadow on IE only on the right side and bottom, how can i get it on the left side as well?)
Thanks in advance!
http://www.stevemoorecpa.dreamhosters.com

  #wrapperSkm
{
border-left-style: solid;
border-right-style:solid;
border-width: 2px;
border-color: transparent;
-moz-box-shadow: 0px 0px 25px #c3c3c3;
-webkit-box-shadow: 0px 0px 25px #c3c3c3;
box-shadow: 0px 0px 25px #c3c3c3;
width:1069px;
overflow: hidden;
position: relative;
padding: 0 0px 0 0px;
margin-left: auto;
margin-right: auto;




  background-image: url(images/bodyBg.png);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,             Color='#000000')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,     Color='#000000');
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
    -o-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);   
}

Answer 1

You can use css3 PIE to work box shadow’s in IE browser. please go through the following website: http://css3pie.com/about/

Note: once you applied the pie in your css class for one div for that div you need to add position:relative for IE 7 and IE 8, if you pie for inside the div you need to add position:relative to parent div i mean top div.