Opactiy through Filters

The objective is to get the contents of a DIV to a certain opacticy. Before adding the complexity of javascript and nested divs and links, i started out with basic tests and I ran into this problem: If I apply a filter opacity to a specific object inside of a div, it works. If I apply the opacity to the div itself, the contents should be opaque, however this only appears to work in Firefox. I need this to work in IE6 and IE7. I seem to remember being able to do this a year or so ago, but now I cannot figure out how to get the contents of a div to be opaque in IE6 or IE7.


The following work in FF2, but not IE7
<div style="filter: alpha (opacity=35); opacity: 0.35;">
<img src="http://www.google.com/images/logo_google_suggest.gif" border="0" />
</div>

The following works in both IE7 and FF2
<div>
<img src="http://www.google.com/images/logo_google_suggest.gif" border="0" style="filter: alpha (opacity=35); opacity: 0.35;" />
</div>


For those of you who might suggest that I simply not use opacity, this is unfortunatly not an option. This is a request that the client has made, and I must find a way to do it if it is at all possible.

My question to you: How can I make the contents of a div be opaque in a cascading manner?

Thank you.

Hm, actually opacity should always have an influence on child elements.
Have you read this great source (http://mandarindesign.com/opacity.html)?

Also you could work with conditional comments to display elements for certain versions of IE only (i.e. put more elements and try combinations with opacity, and hide the elements that aren't working for that browser)

Look at the link you gave me, in the section titled "Opacity with onmouseover and onmouseout" I was able to get opacity to work. So I asked myself, why does it work now, and not before?

So I started removing parts of thier code, until I found the one peice that made it work in IE7... Width.

So for anyone who finds this thread in a search, that is the key. On the site I was working on, i added a width to my style, and suddenly it works. Firefox has the same issue with floats, so i'm not surprised.

THank you for your help.

The reason the width property solves your problem is probably because it triggers a hidden Microsoft property called hasLayout when set to anything other than auto. Other declarations such as height: [not auto] and display: inline-block also trigger hasLayout. If I recall correctly, Microsoft’s DirectX filters only work on elements with hasLayout triggered. Also, I don’t believe that there’s supposed to be a space between alpha(opacity=35).

Resources:
(A) (official) http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp
(B) (explanation) http://www.satzansatz.de/cssd/onhavinglayout.html
Note: The first resource doesn’t appear to be updated as of Internet Explorer 7.