CODEWITHSUNDEEP
internet-explorercss
jrojas
jrojas

Reputation: 39

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

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);   
}

Upvotes: 1

Views: 1281

Answers (2)

Gopikrishna
Gopikrishna

Reputation: 857

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.

Upvotes: 1

AntLaC
AntLaC

Reputation: 1225

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.

This is an image, try setting borders on it or better yet, your .skmLogo class.

For IE browsers less than IE9, create an additional div wrapper to go under everything and apply a blur to it

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');

The box shadow only works in IE9+.

Upvotes: 0

Related Questions