Tech Off Thread

18 posts

IE7 alpha transparent PNG + opacity

Back to Forum: Tech Off
  • User profile image
    CyberGeek

    I am not normally one to ask for help on a forum for an issue like this, preferring instead to solve problems through a combination of Google and experimentation. Despite quite a number of hours spent dedicated to this problem, however, I have found no solution, so I now put the problem forth publicly.

    My issue is that I have alpha-transparent PNGs, and I want to apply an opacity filter to them. In IE7, alpha-transparent PNGs work fine in general, and setting opacity via IE's filter CSS property works fine on most elements, but setting opacity to an alpha-transparent PNG results in the PNG reverting to a boolean kind of transparency (any pixel that is not totally transparent appears opaque).

    So, is there any way at all to get this to work? I have already tried quite a few different approaches, including hacks involving background images in span/div tags and trying AlphaImageLoader in conjunction with Alpha on the filter CSS property. Nothing has worked thus far.

  • User profile image
    Custa1200

    CyberGeek wrote:
    I am not normally one to ask for help on a forum for an issue like this, preferring instead to solve problems through a combination of Google and experimentation. Despite quite a number of hours spent dedicated to this problem, however, I have found no solution, so I now put the problem forth publicly.

    My issue is that I have alpha-transparent PNGs, and I want to apply an opacity filter to them. In IE7, alpha-transparent PNGs work fine in general, and setting opacity via IE's filter CSS property works fine on most elements, but setting opacity to an alpha-transparent PNG results in the PNG reverting to a boolean kind of transparency (any pixel that is not totally transparent appears opaque).

    So, is there any way at all to get this to work? I have already tried quite a few different approaches, including hacks involving background images in span/div tags and trying AlphaImageLoader in conjunction with Alpha on the filter CSS property. Nothing has worked thus far.


    Why would you even use the dodgy MS only CSS hacks? Why do you need to use them on a transparent image when it now works in > 50% of the worlds browsers, which makes me think that there is probably 50% of Windows users who cannot upgrade to IE7 due to non WGA machines???

    If it is to handle the PNG's in IE6 and below why not use conditionals to link to < 7 versions of IE specific CSS files?

  • User profile image
    CyberGeek

    Custa1200 wrote:
    Why would you even use the dodgy MS only CSS hacks? Why do you need to use them on a transparent image when it now works in > 50% of the worlds browsers, which makes me think that there is probably 50% of Windows users who cannot upgrade to IE7 due to non WGA machines???

    If it is to handle the PNG's in IE6 and below why not use conditionals to link to < 7 versions of IE specific CSS files?


    The app in question does not support any version of IE less than 7, so just getting PNGs to work in 6 is not the issue, it's applying an additional opacity filter across the entire image (in Firefox, Safari, or Opera, this would be the effect achieved by applying the opacity CSS property to an alpha-transparent image).

    I use the dodgy Microsoft-only CSS hacks because I want to deliver the best experience I can to the users of the app, including the ones who use IE.

    That said, I've continued searching online for a solution to the problem, and even though many people seem to have run into it, nobody seems to have found a way to pull it off, with some people going so far as to say it isn't possible. I really hope it's possible, because I really don't want to deliver a limited experience to IE users. So, anyone know of a way to do it?

  • User profile image
    cheong

    CyberGeek wrote:
    
    The app in question does not support any version of IE less than 7, so just getting PNGs to work in 6 is not the issue, it's applying an additional opacity filter across the entire image (in Firefox, Safari, or Opera, this would be the effect achieved by applying the opacity CSS property to an alpha-transparent image).

    I use the dodgy Microsoft-only CSS hacks because I want to deliver the best experience I can to the users of the app, including the ones who use IE.

    That said, I've continued searching online for a solution to the problem, and even though many people seem to have run into it, nobody seems to have found a way to pull it off, with some people going so far as to say it isn't possible. I really hope it's possible, because I really don't want to deliver a limited experience to IE users. So, anyone know of a way to do it?

    Would you like to send your question to the IEBlog?

    If there's any people in the world who knows whether it's possible to get something work in IE7, I think it's them.

    Recent Achievement unlocked: Code Avenger Tier 4/6: You see dead program. A lot!
    Last modified
  • User profile image
    odujosh

    Just to correct a stat used. IE exhibits at least a 70% marketshare not 50%.

  • User profile image
    PerfectPhase

    odujosh wrote:
    

    Just to correct a stat used. IE exhibits at least a 70% marketshare not 50%.



    I think the reference was to the number of browsers that support alpha-png, so IE7, Firefox, etc totaling up more than 50%. 

  • User profile image
    Custa1200

    odujosh wrote:
    

    Just to correct a stat used. IE exhibits at least a 70% marketshare not 50%.



    Transparent PNG's work in IE7 so I'll correct your stat and stand by my original of > 50% can use Trasparent PNG's ok now that IE7 has about 50% of the IE share by the sites I am involved in, and by transparent I mean 32bit and not the 8 bit that IE6 and below (except the Mac versions which handled it also) could handle without resorting the the MS CSS hacks.

    To the original poster though, you may have to do some trickery like having 2 sets of images. one for your original and another for your .8 transparency. now fully understanding what you wanted to do I also believe you are going to run into a brick wall doing it the way you were trying.

    The thing about hacks are they are hacks and they do not account for everything the user will try as you have found out.


  • User profile image
    cwford01

    CyberGeek,

    Did you ever get a solution to this problem. I'm facing the same problem with IE7. Would very much appreciate a solution if you've found one.

    Clfye

  • User profile image
    stevo_

    In asp.net we just have adaptive render controls for handling images displaying pngs..

    You try and avoid as much as possible, alienating your construction by breaking it for the sake of an old / broken browser..

    Adaptive rendering is good in that the server is making the decision about the fix.

  • User profile image
    jsampsonPC

    I use the TwinHelix FIX in my apps - http://www.twinhelix.com/css/iepngfix/

  • User profile image
    W3bbo

    stevo_ wrote:
    Adaptive rendering is good in that the server is making the decision about the fix.


    The server can never trust the client. How does the server know what the client is, considering:

    • The UA string can be changed
    • Scripting can be disabled
    • Stylesheets can be disabled
    • HTTP Requests can be forged
    • And so on

     

  • User profile image
    stevo_

    In the case of the adaptive rendering we target, it's reliant on UA string. We never trust that the server knows scripting is enabled, we handle these situations with noscript..

    In terms of stylesheets being disabled, UA strings being modified or HTTP requests being spoofed..

    These are self inflicted by the client, given that adaptive rendering isn't about being exclusivity, meaning that a wrong server belief can cause something terrible to happen, we don't need to worry about the problems..

    Here's our scenario with our control that can do adaptive png rendering for IE 6 and under..

    We do a simple check:

    if (browser is ie and version < 7)
    {
      render out as ie 6 filtered
    }
    else
    {
      the norm
    }


    While I agree people shouldn't go crazy with adaptive rendering, and they should understand it shouldn't be involved in security considerations (if their ever would be), it is a great tool.

    And on a personal footnote, I'm very critical about the relationship clients have to the server.. I never trust the client to make any decisions that are critical to the integrity of the server..

    For example, our previous validation framework is server side, but will add in client side validation just for the sake of giving the client a faster result..

    This is something I feel web developers should especially understand, and that perhaps some desktop application developers are less likely to think about (regarding how much you trust the client (basically, not at all))

  • User profile image
    CyberGeek

    Well, I didn't expect to see this thread resurrected.

    I haven't found any solution to the problem, which disappointed me greatly. I hate cutting out cool things just because I can't find a way to make it work in a specific browser.

    A server-side fix was not an option because I wanted to set the opacity dynamically (a fade animation was the primary use). The TwinHelix Fix wouldn't help since it simply brings IE5.5+ up to the level of IE7's PNG support, and IE7's PNG support was the source of my problem.

    I really hate IE sometimes.

  • User profile image
    W3bbo

    stevo_ wrote:
    In the case of the adaptive rendering we target, it's reliant on UA string. We never trust that the server knows scripting is enabled, we handle these situations with noscript..

    In terms of stylesheets being disabled, UA strings being modified or HTTP requests being spoofed..

    These are self inflicted by the client, given that adaptive rendering isn't about being exclusivity, meaning that a wrong server belief can cause something terrible to happen, we don't need to worry about the problems..

    Here's our scenario with our control that can do adaptive png rendering for IE 6 and under..

    We do a simple check:

    if (browser is ie and version < 7)
    {
      render out as ie 6 filtered
    }
    else
    {
      the norm
    }


    While I agree people shouldn't go crazy with adaptive rendering, and they should understand it shouldn't be involved in security considerations (if their ever would be), it is a great tool.

    And on a personal footnote, I'm very critical about the relationship clients have to the server.. I never trust the client to make any decisions that are critical to the integrity of the server..

    For example, our previous validation framework is server side, but will add in client side validation just for the sake of giving the client a faster result..

    This is something I feel web developers should especially understand, and that perhaps some desktop application developers are less likely to think about (regarding how much you trust the client (basically, not at all))


    Better idea:

    Conditional Comments.

    It's how I do IE6-specific stylesheets.

  • User profile image
    stevo_

    Well conditional comments won't fix the problem with a PNG, as the 'fix' is an inline adaption to the html.

    I've rarely found I need to write style sheets specific for browsers.. if I do then I'd consider the IE comment solution, but again, adaptive rendering could include a style sheet in if it believes the browser is IE..

    Given that a user fakes their UA, their only going to harm their view of the website..

    I'm hardly going to be upset if someone says "LOL OLOLOLOL this site doesn't render right if I change the UA string to spoof IE".

  • User profile image
    mattbarrah

    I know this post was started many moons ago but it came up early on in a google search.  It is possible to get around this issue in IE7 using a combination of filters.  You should be able to wrap your "image" in a div with these styles:


    div#wrapper { /* block level elements support filters in IE */
    opacity:.5; /* for FF, Safari, other browsers */
    filter:alpha(opacity=50);
    }
    span#image{
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://site/path/to/image.png', sizingMethod='scale');
    height:150px; /* what ever width the image is */
    width:150px; /* what ever height the image is */
    }

    Instead of using an image tag use a span with the above styles.  The AlphaImageLoader filter does correct the IE7 opacity issue.  

  • User profile image
    stevo_

    mattbarrah said:
    I know this post was started many moons ago but it came up early on in a google search.  It is possible to get around this issue in IE7 using a combination of filters.  You should be able to wrap your "image" in a div with these styles:

    div#wrapper { /* block level elements support filters in IE */
    opacity:.5; /* for FF, Safari, other browsers */
    filter:alpha(opacity=50);
    }
    span#image{
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://site/path/to/image.png', sizingMethod='scale');
    height:150px; /* what ever width the image is */
    width:150px; /* what ever height the image is */
    }

    Instead of using an image tag use a span with the above styles.  The AlphaImageLoader filter does correct the IE7 opacity issue.  
    Nah, thats a bad hack because the image is now being treat as style information, and IMG element is important because its handled as an image by audio browsers and search engines..

    The above 'hacks' work because they use javascript to find all images and 'molest' them into css versions.. of which the audio browsers and search engines shouldn't be effected by.

  • User profile image
    hjb

    CyberGeek said:
    Well, I didn't expect to see this thread resurrected.

    I haven't found any solution to the problem, which disappointed me greatly. I hate cutting out cool things just because I can't find a way to make it work in a specific browser.

    A server-side fix was not an option because I wanted to set the opacity dynamically (a fade animation was the primary use). The TwinHelix Fix wouldn't help since it simply brings IE5.5+ up to the level of IE7's PNG support, and IE7's PNG support was the source of my problem.

    I really hate IE sometimes.

    I have done a lot of research into the IE7 png with opacity issue and have used two workaround which cover most, but sadly not all scenarios.

    The first one has already been mentioned in this thread which is to have different image files for the different opacities needed. This method works for well for mouseover and mouseout effects when you just want to show state, but is sadly useless when you want to animate the opacity.

    The second method will work most of the time but it depends on your pagelayout and design. To fake the opacity animation of a div you can position a dummy second div over the real div you want to show an opacity change on. The second div should be absolutely positioned and take on the width and height of the background div. Depending on your page design you then give it a background colour (whatever best suits the real background image png) and you animate the opacity on that div to fade in or out depending on the effect you are looking for.
    Because you will be using javascript for the opacity animation anyway, it is simple to create and insert the new div when the effect is needed and remove it once you are done. This allows the actual divs content to still be copy and pasted or right clicked by visitors to the site.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.