Solved

CSS Drop Shadow in IE on 3 sides

Posted on 2010-09-18
4
945 Views
Last Modified: 2012-05-10
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
Comment
Question by:swaggerking
  • 3
4 Comments
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33710425
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
 
LVL 2

Expert Comment

by:kostantinos1995
ID: 33710436
Also change you can change Color='#666' to Color='#666666' as there is some kind of a problem with it.
0
 
LVL 2

Accepted Solution

by:
kostantinos1995 earned 125 total points
ID: 33710443
You can check this article to make it look the same in all browsers:

http://placenamehere.com/article/384/CSS3BoxShadowinInternetExplorerBlurShadow
0
 

Author Closing Comment

by:swaggerking
ID: 33736900
This worked for me. Much appreciation.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question