0

I have a div I want to set an opacity on. I have the following CSS:

background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, .7);
filter: alpha(opacity=70); /* IE 7 and Earlier */
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

Works fine in compliant browsers but in IE 8 this also makes child elements with the div transparent.

I am aware this question is closely related to this one but the answers there didn't work for me.

Would anyone have any suggestions?

Thanks!

Community
  • 1
  • 1
MeltingDog
  • 14,310
  • 43
  • 165
  • 295
  • 2
    That is the expected functionality. Changing the opacity on an element means that anything inside of it is also affected. – Shmiddty Jan 31 '13 at 00:03
  • I thought the RGB values would limit it to the parent element? Are you suggesting IE8 cannot limit the amount of elements affected? – MeltingDog Jan 31 '13 at 00:06
  • @MeltingDog **Cascading** Style Sheets; if you make the parent transparent, the children will be too. Items cannot be *more* visible than the element they're in. – Sampson Jan 31 '13 at 06:11
  • @MeltingDog think of it as though you've got some seats and a steering wheel inside a car. If you set the car's opacity to 50%, would you expect to see through the car completely, or expect to see the seats and the steering wheel as though the rest of the car were disappearing? That'd be a very strange effect. – dudewad Jan 07 '16 at 22:00

1 Answers1

1

IE8 doesn't support RGBa, and the MS Filter opacity will effect the element and it's children.

Suggested fix from http://css-tricks.com/rgba-browser-support/

<!--[if IE]>

   <style type="text/css">

   .color-block { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    } 

    </style>

<![endif]-->

OR (using conditional classes)

<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

   .ie8.your-selector { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
       zoom: 1;
    }

OR

another way to get around this is to use a 1px by 1px transparent png that repeats as the background image for the element..

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94