• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 719
  • Last Modified:

Transparent Layers in Internet Explorer.

I am trying to build a website with transparent layers to show the background image. I have been handed the design by someone else and asked to turn it into a site but I having problems getting layer transparency to work in IE. It works okay in IE9 but not 7 or 8. The CSS I am using is:-

#transparent {
 filter:alpha(opacity=85);
 -moz-opacity: 0.85;
 opacity: 0.85;
}

I use the class in a DIV:-

<div id="transparent" style="position:absolute; width:200px; height:115px; z-index:1"><img src="images/index_r2_c3b.gif" width="776" height="54" /></div>

It works correctly in Chrome, Firefox and Safari and also IE9 but not in IE7 or IE8. I have not tested any earlier versions of IE. I was led to believe that IE would understand  "filter:alpha(opacity=85); " but it does not. Can anyone suggest how to make this work in all versions of IE?
Thanks
0
plokij5006
Asked:
plokij5006
  • 4
  • 3
  • 2
  • +2
1 Solution
 
darren-w-Commented:
try using ms-filter
http://www.quirksmode.org/css/opacity.html


extract:

If you want opacity to work in all IE versions, the order should be:

.opaque {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
      filter: alpha(opacity=50);                              // second!
}
0
 
claracruzCommented:
Add height to the selector to give layout, and see if that works..

Example;-

#transparent {
 filter:alpha(opacity=85);
 -moz-opacity: 0.85;
 opacity: 0.85;
 height:1%;
}
0
 
plokij5006Author Commented:
Thanks for the suggestions but I am afraid neither of those ideas seem to work.

darren, is there something else I need to do to use ms-filter or do I just substitute youir code for mine?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
claracruzCommented:
In that case, try Zoom, for the same reason as above..

example;

#transparent {
 filter:alpha(opacity=85);
 -moz-opacity: 0.85;
 opacity: 0.85;
 zoom:1;
}
0
 
darren-w-Commented:
Hi,

I think the best thing to do for starters is to put all the styling in the style definition:

#transparent {
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
 filter:alpha(opacity=85);
 -moz-opacity: 0.85;
 opacity: 0.85;
 position:absolute;
 width:776px;
 height:54px;
 z-index:1
 background-image:url('images/index_r2_c3b.gif');
}

<div id="transparent></div>

you will need to define the layer (z-index) for the item that it is overlaying

ie:

body{
z-index:-1;
}

in a rush so will look later...
0
 
scrathcyboyCommented:
Transparency does not work in IE6, it is too old, in fact predated transparent layers -- and the use of transparency in IE7 is erratic.  Basically, Microsoft has NEVER been able to adopt anyone else's standards but their own, so their browsers are ALWAYS errant -- straying from the standards.  
0
 
plokij5006Author Commented:
Thanks for the comments but I need to reliably make it work in IE7 or above. Can anyone give me some code that works as nothing so far has helped. Thanks.
0
 
plokij5006Author Commented:
I read somewhere that the html needs to have a specific doctype to make this work. Does anyone know what this might be?
0
 
claracruzCommented:
Any valid DOCTYPE should work.

Did you test the zoom:1 property for the #transparent selector? This is the only reliable way that I am aware of.

#transparent {
 filter:alpha(opacity=85);
 -moz-opacity: 0.85;
 opacity: 0.85;
 zoom:1;
}

My best guess is that your issue has to do with hasLayout. If zoom:1 fails, google 'IE7, hasLayout, transparency'.
You may eventually come across what is unique to your page that is breaking it. Alternatively, can you post a link to the page, or paste the html source along with relevant images.
0
 
plokij5006Author Commented:
Thanks for your suggestion, I will try this out and come back to you.
0
 
James MurrellProduct SpecialistCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now