Internet Explorer - CSS Shadow All Around

CSS Box Shadow Around Entire Div In IE 11

There is a fourth parameter in the box-shadow that lets you increase the size of the shadow, and makes it more visible

.addAccountPanel
    {
        width:250px; 
        height:200px; 
        margin:auto; 
        background-color: rgba(0,0,0, .2); 
        position:relative; 
        box-shadow: 0px 0px 4px 2px #004C7E;
    }

fiddle

Internet Explorer - CSS Shadow All Around

The shadow filter is unidirectional, and direction is a number between 1 and 360 degrees. To generate a box shadow with the ability to offset that shadow, you'll need use multiple shadow filters:

   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
     progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);

This is sorted top/right/bottom/left, and varying the strength on any one side will alter the size of that shadow. For example, 2 5 5 10 will produce a straight-down drop shadow that gives the illusion of height.

Internet Explorer - CSS box-Shadow on table not working for IE browser

I applied box-shadow on td instead of tr with some changes in css and that works for chrome / safari / IE11 / EDGE

Here is working link : https://jsfiddle.net/h9tx9tpx/2/

Working code :

      // css file
        table tbody tr {
            background-color:#13326b;
            color:#ffffff;
            text-shadow: 1px 2px #000000;
        }

        table tbody tr {
            height:70px;
        }

        table {
            border-collapse: separate;  
        }

        td:first-child:before{
            box-sizing: border-box;
            content:'';
            position:absolute;

            left:0;
            right:2px;

            display: block;
            height: 60px;
            box-shadow: inset 6px 0px 0px -1px #ff0000;
            -webkit-box-shadow: inset 6px 0px 0px -1px #ff0000;
        }

Is it possible to use box-shadow in IE8?

You can try @thirtydot answer:

Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.

It supports box-shadow (except for the inset keyword).

EDIT:

or you can try @Marcus Pope answer :

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2); 

Possible duplicate of

Box shadow in IE7 and IE8

CSS3 Box Shadow Effect for IE8?

Top part of box shadow clipped in IE only

Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.

Spelling out the question clearly always helps!

Fix CSS Shadow Issue in Interner Explorer

You can get CSS to test whether filter is supported by the browser in modern browsers. @support isn't supported in IE so it just ignores the setting of the background to black so it's there but not seen.

Here's an example snippet - obviously hasn't got all the right sizing that your code will have.

<style>
  .service_group {}
  
  .uk-box-shadow-bottom {
    position: relative;
  }
  
  .service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    /*background: #000;*/
    /*filter: blur(20px);*/
    height: 40px;
  }
  
  @supports (filter: blur()) {
    .service_group:hover .uk-box-shadow-bottom:before {
      background: #000;
      filter: blur(20px);
    }
  }
</style>
<div class="service_group">Just some info so I can hover
  <div class="uk-box-shadow-bottom"></div>
</div>

Remove 1px transparent space from CSS box-shadow in IE11?

Now that we know it's a bug, here's one acceptable workaround:

.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
    content: " ";
    width:1em;
    left:-1em;
    top:0;
    height:100%;
    background:white;
    z-index:1;    
}
.widget:after {
    left:auto;
    right:-1em;
}

Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.

Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.

Checkout the fiddle here: http://jsfiddle.net/TVNZ2/

---

Related Topics