CODEWITHSUNDEEP
cssinternet-explorer
wickjon
wickjon

Reputation: 920

how to use both shadow and opacity for the same div in ie8

I have the following code where I put a link for blocking click events in an iframe. 

 <div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker"></div>
     <iframe  id="iframewebpage"  runat="server"></iframe>
    </div>

and the CSS

  #iframeBlocker {        
    background:none transparent ;
    background-color:White;
    bottom: 0px;
    color: White;      
    filter:alpha(opacity=10);
    opacity: 0.1;            
    display: block;            
    left: 0px;     
    position: absolute;
    right: 0px;
    top: 0px;      
    z-index: 1040;
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    }

My problem is. I cant use both opacity and shadow for my div. If i use the css ie code for enabling shadow, it doesnt take the opacity.

any workaround for using both shadow and opacity for a div in IE ?

Upvotes: 0

Views: 156

Answers (4)

insertusernamehere
insertusernamehere

Reputation: 23580

You can't have multiple CSS filter rules but you can list multiple filters within a single rule:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)
            progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

Read more on the MSDN: Creating Multimedia Effects with Visual Filters and Transitions.

Upvotes: 1

Spudley
Spudley

Reputation: 168685

IE8 does not have good support for either opacity or shadows.

Both features are sort-of supported via the -ms-filter/filter style, as you've already got in your code, but it's not standards-compliant, and it's not particularly good; filer has lots of bugs and quirks that can make them difficult to use.

In theory, if you want to use more than one filter style, you need to combine them into a single declaration:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)
            progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

(see also: Multiple CSS filters in IE)

@insertusernamehere's answer was nearly right, but he missed the quotes around the style, and it doesn't require a comma between them; just a space.

If that works for you, then good news. However, you still need to be careful, because the various filter styles that IE supports do have a lot of known issues, and are known to have some strange results when used in combination. You need to test carefully if you're going to go down this route.

It's worth also pointing out the popular CSS3Pie library which polyfills various CSS3 features, including box-shadow. It's worth noting that they do not currently support opacity, and the reason for that is largely because of difficulties they've had getting it to work in conjunction with the other features they support.

So after all that, my final suggestion is to drop the requirement for a drop shadow in IE8. Ultimately, it's just eye-candy so it won't affect the usability of your site if its missing, and it will cause you a lot of trouble trying to get it working.

Upvotes: 2

wickjon
wickjon

Reputation: 920

I finally found the way. Was rather simple.

just added the css for adding shadow to IE8 to the enclosing div "Iframewrapper" 

  #IframeWrapper {

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

So instead of adding both the css for opacity and shadow in same div, it works if they are in differnt div's.

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

Maybe try instead of opacity using rgba() if that fits your needs.

#iframeBlocker { 
   background:rgba(255, 255, 255, 0.1);   
}

Upvotes: 2

Related Questions