[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Transparent Layers in Internet Explorer.

Posted on 2010-11-18
12
Medium Priority
?
716 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 2000 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

Technology Partners: 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!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

650 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