View Full Version : PNG files not transparent in IE

10-09-2007, 04:30 PM
So i made my website with PNG transparent background images, which show up fine in Firefox, but do not have a transparent background in IE. How can I fix this?

10-09-2007, 04:35 PM
i have written a javascript fix for using on my sites



10-13-2007, 03:40 AM
where do i put the script? I always keep the original coders comments in being a coder myself. Thanks for the script.

10-13-2007, 03:48 AM
I don't know if the js will fix the transparency for the pngs. It only fixes them for inline images. I'm afraid you'll need to find something else. You probably should have asked before you went ahead and used pngs with alpha transparency. We could have told you IE6 didn't support them. Can you post a link to your site? Chances are you probably don't need transparent pngs at all.

10-13-2007, 04:47 AM
So i made my website with PNG transparent background images, which show up fine in Firefox, but do not have a transparent background in IE. How can I fix this?

I've used the ds-sleight.js (http://dsandler.org/wp/archives/2007/08/22/ds-sleight) script for .png background images with minimal fuss on several sites. Keep in mind that it (or any other method used to get transparent .pngs in IE) only works on background images that don't repeat.

10-13-2007, 06:09 PM
Thanks. So should I change them to a different format? Maybe when you look at th ewebsite you will get a better idea. My temp website is up at


The PNG files are for most of the curvy/smooth edged pictures.


10-13-2007, 06:11 PM
notice this isnt the full website, and some images wernt uploaded, this is just thej general gist of it. only the first link "consulting solutions" works on that site, but the others use similar style and images, the folder tab style.

10-13-2007, 06:58 PM
I don't see a need for transparent pngs. Just slice them up without their transparency and there you have it.

10-15-2007, 04:41 PM
how do you slice em up when they have curvature?

10-15-2007, 05:36 PM
a transparent gif with a white matte will do the job for the links,

while you can add a gray background instead of the transparency (use a jpg or a gif)

if a png is REALLY needed, which i don't think so, but also a good readup from a reliable source : http://www.alistapart.com/stories/pngopacity/

10-16-2007, 01:22 AM
thanks guys, I think i got all the information I need. I just gotta talk it over with the client and graphic designer, thanks a bunch guys! i love this forum

Afrow UK
10-16-2007, 01:19 PM
I have to use Javascript fixes for PNG transparency on both of these websites:
http://ecs.hiprmod.net http://hmd.hiprmod.net
Basically it creates a new image with the IE-only alpha transformations applied over the existing one.
Hopefully one day we won't need to bother as IE7 supports full PNG transparency.


10-16-2007, 09:15 PM
as a rule of thumb, always try and use GIFs as opposed to PNGs wherever possible.

much less fuss in the end for a product that looks almost identical.

10-16-2007, 11:09 PM
Canít completely agree with that. PNGs (with 8 bit palette) are usually much smaller than GIFs regarding file size (except very small files) and also there are no further problems with PNGs at all except the alpha transparency in IE 6 and lower. Just donít use it and youíre perfectly set.
Plus 24/32 bit PNGs are much more flexible and in some cases still smaller than GIFs if you have more than 256 colors.

10-17-2007, 02:16 AM
Your site looks amazing but it does not need to use transparency.

Keep it up!

10-17-2007, 09:31 AM
This is what i used in the past

<!-- Ridiculous PNG hax for IE (WE HATE IE). Unfortunaly this is the only way we can display alpha png's in IE-->
<![if !IE]><img class="centerimage" src="images/logo.png" alt="Jamie's Computers logo" /><![endif]>
<!--[if IE 7]><img class="centerimage" src="images/logo.png" alt="Jamie's Computers logo" /><![endif]-->
<!--[if !IE 7]><div class="bannercontainer"><![if IE]><img class="centerimage" src="images/spacer.gif" border="0" style="width:282;height:115;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale')" alt="Jamie's Computers logo" /><![endif]>
<!--End of ridiculous PNG hax -->

It worked for me. images/spacer.gif is a transparent gif 1px x 1px

Afrow UK
10-17-2007, 02:55 PM
That's very nice I may have to adopt it!

10-20-2007, 01:54 AM
can I use that on <a id's and <div id="s ?

<div id="indexContainer">
<div id="navBar">
<!-- large top nav bar words -->
<a id="consultingSolutions" href="pages/ConsultingSolutions_ProgramManagement.html" title="Consulting Solutions"><span></span></a>
<a id="pastResults" href="pages/PastResults.html" title="Results"><span></span></a>
<a id="insight" href="pages/Insight.html" title="Insight"><span></span></a>
<a id="clientsSay" href="pages/WhatClientsSay.html" title="What Clients Say"><span></span></a>
<!-- large top nav bar arrows -->
<a id="consultingSolutionsA" href="#" title="Consulting Solutions Arrow"><span></span></a>
<a id="pastResultsA" href="#" title="Results Arrow"><span></span></a>
<a id="insightA" href="#" title="Insight Arrow"><span></span></a>
<a id="clientsSayA" href="#" title="What Clients Say Arrow"><span></span></a>
<!-- small nav bar words -->
<a id="home" href= "index.html" title="Home"><span></span></a>
<a id="contact" href="" title="Contact"><span></span></a>
<a id="about" href="pages/about.html" title="About"><span></span></a>
<!-- small nav bar arrows -->
<a id="homeA" href="#." title="Home Arrow"><span></span></a>
<a id="contactA" href="#" title="Contact Arrow"><span></span></a>
<a id="aboutA" href="#" title="About Arrow"><span></span></a> </div>