CODEWITHSUNDEEP
cssopacitytransparentalpha
Ryan
Ryan

Reputation: 18109

IE alpha transparency with positioned children elements

I'm trying to have a container element faded using:

zoom: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=14)"; /*IE 8,9*/
filter: alpha(opacity=14); /*IE 5,6,7*/
opacity: .14; /* Good Browsers */

Within this container, I have children elements that are positioned relative with position absolute children in those. IE 8 and below have determined that these elements shouldn't listen to the transparency and should show at full opacity.

Is there any way to make IE respect the transparency of the positioned elements they should have? These elements fade in/out and have effects on them, so I'd like to avoid having numerous IE hacks everywhere in javascript, and if I duplicate the transparency in CSS on them other browsers will fade them again, making them almost invisible.

Upvotes: 0

Views: 705

Answers (2)

Nate B
Nate B

Reputation: 6356

There are comments on JQuery's .fadeTo() method page that reference this bug. Unfortunately, there also doesn't seem to be any fix at the moment other than to apply the fading to each absolutely positioned element instead of the parent.

Upvotes: 1

Macrina Damian
Macrina Damian

Reputation: 1

Try this technique, it's pretty cool. I've used this style:

.alpha80 { 

  background: rgb(255, 255, 255);

  background: rgba(255, 255, 255, 0.8);

  background: transparent !ie;

  zoom:1;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff,endColorstr=#CCffffff);

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCffffff, endColorstr=#CCffffff)";

}

And then for your HTML:

<div class="alpha80">
  <!--your content-->
</div>

Upvotes: 0

Related Questions