Welcome to WebmasterWorld Guest from 54.159.19.75

Forum Moderators: not2easy

Message Too Old, No Replies

drop shadow code around border not working on IE8

     
8:06 pm on Dec 23, 2011 (gmt 0)

New User

10+ Year Member

joined:July 13, 2005
posts:31
votes: 0


Hello,

Our site currently uses dynamic width. We are currently in the process of updating this to fixed width that has a small drop shadow type border around the edges. This looks nice in FF and Chrome, but does not work properly at all in IE8. Here is the code we are using:

body.bg {
background-color: #f8eddd;
width: 1020px; margin: 0 auto;
-webkit-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .3);
box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, .3);
zoom:1; /* This enables hasLayout, which is required for older IE browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);}

}

<body class="bg"> site content </body>


Does anyone have any feedback on the css here and what we could do for IE?

I can show you a sample page to compare in FF/Chrome/IE if requested and it's allowed.

Thanks,
Carl
7:53 pm on Dec 24, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:729
votes: 8


Internet Explorer 8 doesn't support box-shadow natively, see [msdn.microsoft.com...]

A different approach that supports IE 5.5 to IE 8 is here [robertnyman.com...]

Basically the syntax of the filter statement changes between versions. Your code is in the format that supports IE 5.5 to IE 7 only.
7:00 pm on Dec 27, 2011 (gmt 0)

New User

10+ Year Member

joined:July 13, 2005
posts:31
votes: 0


Thanks for your reply, will look into that.