• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 967
  • Last Modified:

CSS Drop Shadow in IE on 3 sides

I'm trying to figure out how to put a drop shadow around 3 sides of div (top, left and right side).

I'm currently using the following which works in FF/Safari but not IE.

.shadow {
      -moz-box-shadow: 0px 0px 8px 3px #666;
      -webkit-box-shadow: 0px 0px 8px 3px #666;
      box-shadow: 0px 0px 8px 3px #666;
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-45, Color='#666')";
      /* For IE 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-45, Color='#666');
}

0
swaggerking
Asked:
swaggerking
  • 3
1 Solution
 
kostantinos1995Commented:
Well, I tried this and it works in IE 8:
<style type="text/css">
.shadow {
      -moz-box-shadow: 0px 0px 8px 3px #666;
      -webkit-box-shadow: 0px 0px 8px 3px #666;
      box-shadow: 0px 0px 8px 3px #666;
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-45, Color='#666')";
      /* For IE 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=-45, Color='#666');
}
</style>

<div class="shadow" style="border: 1px solid #CCC; width: 300px; height: 200px; background-color: white;">
Some stuff
</div>

Open in new window

0
 
kostantinos1995Commented:
Also change you can change Color='#666' to Color='#666666' as there is some kind of a problem with it.
0
 
kostantinos1995Commented:
You can check this article to make it look the same in all browsers:

http://placenamehere.com/article/384/CSS3BoxShadowinInternetExplorerBlurShadow
0
 
swaggerkingAuthor Commented:
This worked for me. Much appreciation.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now