Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts

    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
    Code:
    <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
    Code:
    <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.
    If I'm postin here, I NEED YOUR HELP!!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Hm, actually opacity should always have an influence on child elements.
    Have you read this great source?

    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)

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Oregon, United States of America
    Posts
    882
    Thanks
    1
    Thanked 9 Times in 9 Posts
    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.
    Last edited by Ultragames; 12-07-2006 at 09:30 PM.
    If I'm postin here, I NEED YOUR HELP!!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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/a.../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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •