[internet-explorer] Box shadow in IE7 and IE8

I want to implement box shadows in IE7 and IE8. I have tried everything without succeeding. Here is the css that I am using to apply colored shadow to a div:

.bright{
    position: absolute;
    z-index: 1; 
    -moz-box-shadow: 0px -3px 55px 20px #147197;
    box-shadow: 0px -3px 55px 20px #147197;
    -webkit-box-shadow: 0px -3px 55px 20px #147197;
    behavior: url(ie-css3.htc);
}

This ie-css3.htc file is a solution to IE shadow problems. But it only gives black shadows, not colour shadows. I tried:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=100, Strength=13);

But it creates a directional shadow, and I want an omni-directional shadow. Also tried blur filter but it needs to have additional divs which is unadvisable in my current case. Any expert opinion on this problem ?

The answer is


You could try this

box-shadow:
progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=20, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=20, OffY=30, Color='#19000000'), 
progid:DXImageTransform.Microsoft.dropshadow(OffX=30, OffY=40, Color='#19000000');

in ie8 you can try

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#c0c0c0');

caveat: in ie8 you loose smooth fonts for some reason, they will look ragged


use this for fixing issue with shadow box

filter: progid:DXImageTransform.Microsoft.dropShadow (OffX='2', OffY='2', Color='#F13434', Positive='true');

Examples related to internet-explorer

Support for ES6 in Internet Explorer 11 The response content cannot be parsed because the Internet Explorer engine is not available, or Flexbox not working in Internet Explorer 11 IE and Edge fix for object-fit: cover; "Object doesn't support property or method 'find'" in IE How to make promises work in IE11 Angular 2 / 4 / 5 not working in IE11 Text in a flex container doesn't wrap in IE11 How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript? includes() not working in all browsers

Examples related to internet-explorer-8

HTML embedded PDF iframe IE8 issue with Twitter Bootstrap 3 addEventListener not working in IE8 first-child and last-child with IE8 Box shadow in IE7 and IE8 CSS rounded corners in IE8 How to disable Compatibility View in IE Why an inline "background-image" style doesn't work in Chrome 10 and Internet Explorer 8? IE8 support for CSS Media Query Opacity of div's background without affecting contained element in IE 8?

Examples related to internet-explorer-7

Box shadow in IE7 and IE8 filter: progid:DXImageTransform.Microsoft.gradient is not working in ie7 document.body.appendChild(i) How do I force Internet Explorer to render in Standards Mode and NOT in Quirks? Online Internet Explorer Simulators IE7 Z-Index Layering Issues Force IE8 Into IE7 Compatiblity Mode How to launch an EXE from Web page (asp.net) clientHeight/clientWidth returning different values on different browsers Running Internet Explorer 6, Internet Explorer 7, and Internet Explorer 8 on the same machine

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width