Post : 25/05/09 14:05

PNG 24bit bug fix for IE

How to use PNG 24bit with Alpha transaprency in your HTML pages for IE6, IE7 and IE8.

First of all, if you want to check your pages on different versions of IE but you don't know how, I suggest you to take a look at this post : http://blog.mediaandme.be/?ref=16

So, let's start!

PNG with Alpha transaprency is the next step of webdesign... once every web browser will display them as they should!
PNG format exists since a while and almost all browsers editors are aware about that... except Microsoft!

IE6 is the nightmare of a lot of webdesigners for many reasons and, within others, PNG use.
By example, have a look at this image in IE6 :

PNG not fixed


Hum, ok, not a problem, you decided to forgot IE6, after all, it is an old browser of 2001 with a lot of security hole and bla bla bla...

So, this png was displaying correctly on your IE7 and IE8, huh?

Now, that you integrated your beautiful page with a lot of transparent PNG, you decided to use your favorite AJAX library (or decided to write a clean javascript code by yourself!) and decided to create a little slideshow with a fade :

PNG not fixed

Welcome to the bugfixed IE8...


Now, let's talk about the solutions.

You're fed up with IE6? OK, I can understand. So let's fix this hole for IE7 and IE8: The first solution is to fix it with a background; your image defined like that:

<img src="myImage.png" alt="my alt" style="filter:Alpha(Opacity=50);opacity:0.5;" />

must become

<img src="myImage.png" alt="my alt" style="filter:Alpha(Opacity=50);opacity:0.5;background:url(myBackground.jpg);"/>

Let's test it :
PNG fixed for IE7 and IE8


Well, why use a png then? Perhaps to allow the website administrator to change the background by example, but it's a half fix...


Now, if you want a better fix for IE6 to IE8, here is the HTML/CSS way to do :
your image defined like that:

<img src="myImage.png" alt="my alt" style="filter:Alpha(Opacity=50);opacity:0.5;" />

must become

<div style="filter:Alpha(Opacity=50);opacity:0.5;">
    <div style="display:block;width:300px;
         height:50px;filter:progid:DXImageTransform.
         Microsoft.AlphaImageLoader(enabled=true,
         sizingMethod=crop,src=myImage.png);">
    </div>
</div>


Let's test it :


Yeah! it works!... huh? or it doesn't?! On one side : the <div> won't be react like an <img> item, so, you must be sure that your CSS will do the job correctly. On the other side, let's go back to Firefox, Opera, Safari, ... : the png isn't displayed anymore. And... Alpha filter does'nt work with IE6.

So, this solution was great for, by example, an intranet.

Let's talk about an internet solution now.

Well, you probably already heard about IE conditional comments (if not : http://msdn.microsoft.com/en-us/library/ms537512.aspx).

your image defined like that:

<img src="myImage.png" alt="my alt" style="filter:Alpha(Opacity=50);opacity:0.5;" />

must become

<!--[if IE]>
<div style="filter:Alpha(Opacity=50);opacity:0.5;">
    <div style="display:block;width:300px;
         height:50px;filter:progid:DXImageTransform.
         Microsoft.AlphaImageLoader(enabled=true,
         sizingMethod=crop,src=myImage.png);">
    </div>
</div>
<![endif]-->
<![if !IE]>
    <img src="myImage.png" alt="my alt" 
    style="filter:Alpha(Opacity=50);opacity:0.5;" />
<![endif]>



And finally :
PNG not fixed for IE


Hyrray! it works...even if it's heavy and Alpha filter is still not working with IE6.

Time to conclude
  1. Try to avoid to use png if you plan to use an Alpha CSS filter in IE.
  2. NEVER use a transparent 24bit png as a background (at this time).
  3. Nobody said it's impossible but nobody said it's easy either.
  4. Remember that using Alpha transparency in HTML is heavy for any browser.
  5. you must ALWAYS think about parts that will need PNG transparency before to start an HTML slicing.


There is 2 another ways to fix your PNG that will do this hard job for you : Javascript and server-side code. We will need the Javascript solution to allow Alpha filter to work with IE6, but we will discuss about it in a further post.

+ share / bookmark+ share / bookmark

Submit your comment


(won't be displayed)
(optional)
    SUBMIT        SUBMIT    

Comments

  • 01/04/10 07:04 by Matthew Hager

    I just posted a reply on this thread about how I got around this bug: http://www.sitepoint.com/forums/member.php?u=376083

    • 26/10/09 10:10 by MediaAndMe

      @komplikator You won't be able to fix anything you can't acces, but... if you ABSOLUTELY need it and have a lot of time to waste, you can always create a proxy on your server and then do the fix trough you proxy :-\ What I suggest in this case is to simply avoid transparency and try to find another way to display google map (or anything else you couldn't access)

    • 14/10/09 00:10 by komplikator

      Yeah... However, if you place GoogleMaps IFRAME over (inside) a div that has alpha:(opacity=x), everything works fine EXCEPT for the callout cloud that describes google locations... which uses another layer of transparency... that can't be fixed, since we don't have access to the callout cloud. or can it?

    • 11/08/09 11:08 by ABS

      I'm using PNG in my new design, but there is still alpha issues with IE 7 or 8. I've already given up on 6 for this redesign. I'm trying to find a way to fix the alpha in IE8.

    • 10/07/09 00:07 by MiD-AwE

      I could only have imagined that so late in the game, macroslop would still be so sloppy with the png support. It's as if they are diametrically opposed to things they didn't invent. I wish it was easier to educate users about better browsers. Thanks for the information.



 
MediaAndMe