Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Drop shadow not working in ie8 and breaks styling on other browsers

Drop shadow not working in ie8 and breaks styling on other browsers

Problem

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);   
}
Problem courtesy of: jrojas

Solution

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.

Solution courtesy of: Gopikrishna

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Drop shadow not working in ie8 and breaks styling on other browsers

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×