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
plokij5006Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.