CODEWITHSUNDEEP
internet-explorercss
Daniel Harris
Daniel Harris

Reputation: 1905

CSS Box-Shadow Not Working in IE

How would I get this to work in IE?

.fancy {
     border: 1px solid black;
     margin: 10px;
     box-shadow: 5px 5px 5px #cccccc;
     -webkit-box-shadow: 5px 5px 5px #cccccc;
     -moz-box-shadow: 5px 5px 5px #cccccc;
}

Thanks

Upvotes: 13

Views: 64595

Answers (12)

leachim
leachim

Reputation: 332

The probably most elegant and functionable way to set IE-specific styling today are media-queries. Despite they're not the most beautiful, it work's reliable without making use of filters or even JS.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

For more Details see: https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/

Upvotes: 0

yellow
yellow

Reputation: 463

For me, the problem was that IE doesn't seem to like hex colors with 8 digits (the last two were for the alpha channel). I solved the problem by switching from hex colors to rgba() colors.

I discovered this by accident and I'm surprised I haven't seen it documented anywhere yet!

Upvotes: 0

Alireza
Alireza

Reputation: 104900

Adding display: block; to CSS class works for me in IE11...

Upvotes: 0

Soul Eater
Soul Eater

Reputation: 505

It's already 2018, happens the same with IE11. Sometimes the box-shadow doesn't work, but sometimes it does.

I tried this with IE11 and IE10: Try changing the display of the element where you want to add the shadow (usually "display: block" works fine):

.fancy {
  display: block;
  border: 1px solid black;
  margin: 10px;
  box-shadow: 5px 5px 5px #ccc;
}

Upvotes: 0

Wasif Kirmani
Wasif Kirmani

Reputation: 1331

By default IE was setting up IE10 Compatibility mode which should be replaced with IE 9 using meta-tag. So, whenever it will be running on other browsers then it will use the CSS that will be compatible with IE9. As in IE10 Compatibility mode box-shadow CSS property has been removed from the library

We can use meta-tag in head just to change the document compatibility level:

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

Above tag is showing that make this document compatible with IE8 and IE9 for browsers other than IE8 and IE9 switch CSS level to IE9.

Upvotes: 2

thirtydot
thirtydot

Reputation: 228302

On your site, this CSS rule is preventing box-shadow from working in IE9:

table, table td {
    border-collapse: collapse;
}

See: box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

You must add border-collapse: separate; to the element that box-shadow is not working on.

So, this should fix the problem for you:

.fancy {
    border-collapse: separate;
}

Upvotes: 56

James Johnson
James Johnson

Reputation: 46077

I believe this issue is specific to your browser, because it works for me in this jsFiddle on both IE9 & Chrome. The link you provided works in Chrome, but not in IE9. This would indicate that the issue is specific to your implementation.

I would check to make sure that compatibility mode is disabled, and also make sure you don't have any settings enabled that would interfere with CSS. I would also suggest testing this in multiple browsers and using process of elimination to determine why it isn't working.

EDIT

I was just looking at your markup. Try removing this line and see if it makes a difference:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 0

stewe
stewe

Reputation: 42654

You could also use http://css3pie.com/

PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

Upvotes: 2

Guffa
Guffa

Reputation: 700840

It works fine in IE 9.

Earlier versions doesn't support box-shadow, but you can use a filter:

zoom: 1;
filter:
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);

Read: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Upvotes: 5

T. Junghans
T. Junghans

Reputation: 11683

box-shadow is supported from IE9 onwards.

There are plenty of sites out there describing how to do this for older IEs. One of them is: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Also check out: http://www.css3.info/preview/box-shadow/

My personal opinion in general on making older browsers do things they actually cannot is this: Avoid it. Instead apply the principles of progressive enhancement. Also explain to your client that solving problems of outdated, non standard browsers with non standard solution, is very time consuming and probably not worth the effort.

Upvotes: 7

Sven Bieder
Sven Bieder

Reputation: 5681

On IE you need to use filter for that effect.

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;

Upvotes: 1

Matthew
Matthew

Reputation: 25793

From google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Probably not exactly as you want it, but fiddle around with it or look into DXImageTransform some more.

Upvotes: 1

Related Questions