PDA

View Full Version : Shadow in IE breaks code



roban
Dec 30th, 2010, 09:01 PM
I am coding a site for a designer client and I need to have a shadow around a container. It works very well in FF and Safari but (of course) not in IE.

Here's the css for the shadow:

.shadow {
-moz-box-shadow: 12px 12px 16px #69635C;
-webkit-box-shadow: 12px 12px 16px #69635C;
box-shadow: 12px 12px 16px #69635C;
}
As I said this works in FF and safari http://easthamptondesign.com/eliot

But if I add a line for IE it breaks. Here's the line I'm adding to the above:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#6 9635C', Direction=135, Strength=3);

Any ideas on how to display this shadow in IE?

Excavator
Dec 30th, 2010, 09:26 PM
Hello roban,
That is CSS3 you are using to make that shadow and IE does not support that below version 9.

Have a look at a shadow method here (http://nopeople.com/CSS%20tips/drop_shadow/index.html) that works in those older browsers.

In your CSS, there is some parse errors that may not be helping you.
Check that .shadow in the CSS validator. See the links about validation in my signature line.

Excavator
Dec 30th, 2010, 09:39 PM
I'm not sure how you came up with that p for your shadow anyway. It seems if you want a shadow on #container1, that's where you should put it.

Try removing that p.shadow from both markup and CSS and use this in it's place -

color: #000;
background: url(http://easthamptondesign.com/eliot/images/bgd.png);
}
#container1 {/*Home Page*/
position: relative;
height: 648px;
width: 951px;
margin: 0 auto;
background: url(http://easthamptondesign.com/eliot/images/eve_home.jpg) no-repeat;
-moz-box-shadow: 12px 12px 16px #69635C;
-webkit-box-shadow: 12px 12px 16px #69635C;
box-shadow: 12px 12px 16px #69635C;
/* For IE*/
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=145, OffY=4, Color='#69635C');
progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}
#container2 {/*About Page*/
position: relative;

roban
Dec 31st, 2010, 01:48 PM
Thank you for the feedback. I installed IE9 and my code works perfectly.