Solved

Transparent Layers in Internet Explorer.

Posted on 2010-11-18
12
673 Views
Last Modified: 2012-05-10
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
Comment
Question by:plokij5006
  • 4
  • 3
  • 2
  • +2
12 Comments
 
LVL 13

Expert Comment

by:darren-w-
Comment Utility
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
 
LVL 4

Expert Comment

by:claracruz
Comment Utility
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
 

Author Comment

by:plokij5006
Comment Utility
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
 
LVL 4

Expert Comment

by:claracruz
Comment Utility
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
 
LVL 13

Expert Comment

by:darren-w-
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
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
 

Author Comment

by:plokij5006
Comment Utility
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
 

Author Comment

by:plokij5006
Comment Utility
I read somewhere that the html needs to have a specific doctype to make this work. Does anyone know what this might be?
0
 
LVL 4

Accepted Solution

by:
claracruz earned 500 total points
Comment Utility
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
 

Author Comment

by:plokij5006
Comment Utility
Thanks for your suggestion, I will try this out and come back to you.
0
 
LVL 31

Expert Comment

by:James Murrell
Comment Utility
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now