Fixing Transparent Images In Internet Explorer

December 13th, 2007 • Related • Filed Under

NO IE! As a website proprietor I want everyone to come to my site. First of all the traffic validates my labor, and second I hope to make some income. A lot of time is spent on design. We want people to find our websites intuitive to navigate and easy on the eye. Once we are satisfied with the design, we may or may not care that all of our visitors are getting the same experience. We should, and I think most of us do take a look at the finished site to make sure it looks proper in a variety of web browsers.

My preference is for Mozilla-based browsers, but KHTML-based browsers (Konqueror, Safari, OmniWeb) and Opera are also excellent choices. There’s no denying that Internet Explorer is still a big player in the web browser business. Since my site’s inception on August 5th of this year, 46% of my visitors have surfed in on Internet Explorer.

So, I thought that I had my site’s behavior nailed down to perform the same regardless of web browser. That was, until two weeks ago when I discovered another hoop that Microsoft was going to make me jump through to get my site to work as intended in Internet Explorer.

The hurdle was that Internet Explorer prior to IE7 did not support transparency in images. This is an issue for me, because I use a transparent PNG in my header graphic. I use an obscure font for my logo, so I can’t just slap my name up in HTML, I have to whip it up in Photoshop as a transparent PNG that lays on top of my header. That logo is my brand. I need everyone to see it the same, regardless which OS or web browser they are using.

I’m a Mac user at home, and at work we are 100% Firefox, so I hadn’t noticed that my logo was a big, gray splotch on the header for IE users. My first reaction was that’s what they deserved for using a crappy web browser, but then reality sank in and I realized nearly half of my visitors saw an unfinished-looking header perched atop my pages. Unacceptable.

IE7 now supports transparency, but there are still a lot of IE6 users surfing out there. The answer? I found that someone had already done the work for me and written a javascript workaround that allowed IE6 to display transparent images. The solution is to embed this script in your pages if you have any transparent images on your site. If you’re feeling particularly clever you can save the script as pngfix.php and add this single line to your header:

<?php include_once “pngfix.php” ?>

The end result? Your web page is a couple kilobytes larger and IE6 will now display your transparent images as you intend them to appear.

Subscribe To RSS Feed Updates (What is RSS??)

Bookmark & Share

About the Author

Michael was a bass player in a hardcore punk band in the 80's and spent the 90's building and riding custom Harleys. As strange a combination as it may seem, Mike also has some coder and sysadmin in his history as well. At 42 Mike's now a husband and dad, and works as a Corrections Officer in a maximum security lockdown unit by day, and is admin at AV Enthusiast and contributor to Connected Internet when time allows. Mike is also passionate about food and travel.

See All Posts by This Author

There Are 20 Responses So Far. »

#1

Comment by Jack on 13 December 2007:

sorry if i’m wrong, but IE really doesn’t support transparent image on a non gif image right? have you tried to convert your .png image to .gif?

oh i like that ff and ie logo on this post
#2

Comment by mlankton on 13 December 2007:

I thought IE7 did transparent PNGs too. I’m not near a PC so I can’t check it at the moment. I could swear that IE7 showed my pages right without the fix. IE6 and IE5.5 definitely do not do transparent PNGs without the javascript fix.
#3

Comment by vincent lecluse on 13 December 2007:

I have once done a coding for a big company, but I was using Firefox for the development. Everything was perfect, but when looking at if from IE’s eyes, this was not that so perfect.

Some background were of different colours, but the worst is the way it decodes the css file. Some functions have different effect on IE and firefox as well as the other web browsers.
#4

Comment by Smackall on 13 December 2007:

I tried this script and still having the same issue…
#5

Comment by Amanda on 13 December 2007:

I suffered this problem to great extent in my various blogs. The PNGfix javascript is excellent and works perfectly in Blogger blogs, but unfortunately not so in many Wordpress blogs.

Transparent GIFs do work fine in all browsers I have encountered, but the quality of gifs is nowhere near as good as PNG images. I also prefer to use PNGs for many of my images in order to retain quality, though I have had to restrict my designs in Wordpress blogs due to the incompatibility of transparent PNGs with the templates I use.

After extensive searching, I have not yet discovered a working solution for my Wordpress blogs (as I said, the pngfix.js does not work for me), so if anyone does know of one I would be most happy to know about this!

I’m glad to see that it does work for you though Everton! I checked your site in IE6 and your header looks just fine.

Best wishes and thanks for bringing this up,
Amanda
#6

Comment by Smackall on 13 December 2007:

The problem with this script is that the effect does happen only to the images that are brought to the browser through img tag in html and it doesnt do anything to those images which are used as background in the table tds and trs. Let me try to fix this problem and post here is successful. I too have this problem on my new website.
#7

Comment by Degree on 13 December 2007:

Hmmm… and then again, many surfers on IE 6.0+ don’t have java installed by default. You’ll still have to download an installer for it.

Like when I logon to louisvuitton.com, I can’t access anything since my IE6 has no java
#8

Comment by mlankton on 13 December 2007:

Exactly. PNG is a better format and produces better images. Generally speaking, PNGs are indistinguishable from TIFFs. PNG also produces a small file.
Smaller file, better image.
As far as I’m concerned there is no reason to use GIF at all, unless you need a small, animated as or image.
I don’t really think you can argue about compatibility being a compelling reason to use GIF or JPG over PNG anymore, as all browsers at this point in the game support the format. I still have quite a few jpegs on my site, but every time I save a new image anymore I use PNG.
#9

Comment by Micah on 13 December 2007:

I’ve been using Firefox after having problems with IE6. I do use png images, I’ll have to go check to see if my pages show up correctly in IE6 now.
BTW, funny image you have in the post.
#10

Comment by Hairgel_Addict on 13 December 2007:

There’s a way to achieve same result without the use of any script with only CSS

.someBox { /* IE6 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’firefox.png’, sizingMethod=’scale’);
}

html>body .someBox { /* Firefox, IE7, Opera */
background: url(firefox.png) no-repeat !important;
}

.PNG image is inserted via one of IE’s filters thus fixing transparency issue. Only 1 thing must be specified - exact width & height of .PNG inserted, otherwise filter with squeeze the image.

How it works:

- IE6 and all lower versions of IE don’t understand “html>body” part, so they use “filter”.
- Firefox & Opera don’t have IE filters, but DO understand “html>body” part, so they use “background”
- And finally IE7 has filters and understands “html>body” part, but since second rule is marked “!important” - IE7 uses it and ignores “filter”.

No scripts, no hacks - plain CSS magic
#11

Comment by Michael Lankton on 13 December 2007:

A good way to implement that would be a style sheet call in your header. Something like:
#12

Comment by Michael Lankton on 13 December 2007:

“
“
#13

Comment by Michael Lankton on 13 December 2007:

if lte IE 6
link href=http://yoursite.com/css/pngfix.css rel=stylesheet type=text/css
#14

Comment by Smackall on 15 December 2007:

Does this technique work for repeated background images also?
#15

Comment by mlankton on 15 December 2007:

As far as I know this should work for all PNGs with transparent backgrounds in IE6 and 5.5.
#16

Comment by Smackall on 17 December 2007:

@Hairgel_Addict

love your code… it works fine… But damn it took off all links in my site with IE, any version.

I am not able to click any links on my site from any IE.
#17

Comment by Smackall on 17 December 2007:

Links with an image in it doesnt work at all… I now started hating IE after loosing much hair for it…
#18

Comment by Hairgel_Addict on 17 December 2007:

2 Smackall:

Try applying that class I’ve written above to a transparent pixel .GIF stretched to the size of inserted .PNG image, so you’ll have something like:

<a href=”#”><img src=”pixel.gif” class=”someBox” alt=”" border=”0″ /></a>

Just don’t forget to specify width & height either in CSS or directly inside IMG tag Should work, I’ve just tested it to be sure
#19

Comment by Adrian on 29 January 2008:

There is an excellent article and a working fix available that is standards compliant at: 24ways.org.

For page load and image file size, in many instances, transparent .gifs are better. Thank God updated browsers are supporting ping use.
#20

Comment by Lori' on 30 April 2008:

Thanks so much! The code worked for my logo. I really appreciate it!