Solved

Transparent Layers in Internet Explorer.

Posted on 2010-11-18
12
693 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-
ID: 34163237
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
ID: 34163322
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
ID: 34163710
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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 4

Expert Comment

by:claracruz
ID: 34164268
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-
ID: 34165416
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34170154
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
ID: 34197904
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
ID: 34216905
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
ID: 34216975
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
ID: 34217562
Thanks for your suggestion, I will try this out and come back to you.
0
 
LVL 31

Expert Comment

by:James Murrell
ID: 36434000
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 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