Transparent Images Using PNG’s (Yes, Even in IE)

Gone are the days of attempting to hodge podge a transparent gif, in an attempt to match the “matte” of the gif in photoshop to the color of the background in your page.   The only way to achieve transparency is with a PNG.  You will see a dramatically higher level of clarity with png, allowing for near freedom; dropshadows, fonts, gradients are all handled fairly well with png.

What’s the Problem?

The problem however is that IE 6 definitively does NOT support transparent images.  I think Firefox has been supporting it since the ice ages, and probably earlier.  So, I can’t use transprent png’s??

The Solution

Thanks to Twin Helix (Angus Turnbull)’s IE PNG Fix, we can now use transparent images wherever we want, AND it supports transparent background images!   TO NOTE: There are other IE PNG Fixes, but we found them to be either: too obtrusive, or not supporting background images, (this also includes our old favorite sleight).

How to Use It

Implementation is just a few steps and doesn’t require long lines of css or javascript code.  Get the full directions here. Simply include the attached .htc file, blank 1x1px gif, and one quick line of CSS:

img, div { _behavior: url(scripts/iepngfix.php) }

** PLEASE NOTE: We found that the original script (which does not include an underscore), caused CSS Warnings in Firefox, so the addition of the underscore hides the declaration from Firefox and applies to IE Only.

In this case, we are applying the transparent png support to all images, and divs, you can use it for any elements you wish.

Known Issues

Being a bug fix, there are some known issues.  For example:

  • Child links of absolutely positioned elements cannot be clicked.  There is a workaround for this, but not a full solution.
  • z-index issues: when positioning dynamic elements (e.g. a dropdown navigation), images affected by the script will always appear in front of the absolutely positioned elements.  Working on a solution..

UPDATE

I know it’s pretty early for an update, as we just published this, but moving on…

Anyway, as this uses the CSS code above to implement the png fix, we would advise a specific class just for the fix which is applied on a case by case basis.  That way you can apply the fix only when needed, speeding up load time and preventing any javascript or css confusion.  For example:

.pngfix { _behavior: url(scripts/iepngfix.php) }

Alright have fun, and feel free to buy me a beer.

Post Written by Tison Kelley

Tison Kelley , B.S., specializes in User Interface Design and User Experience in enterprise architectures. Nationally, he has worked with the U.S. Navy, Federal Aviation Administration, and the University of San Diego's Institute for Peace & Justice. Regionally, he has worked with McDonald's franchises, SAAB Sensis Corp, Consumer Credit Counseling, C.B. Richard Ellis, Upstate HomeCare and CNY organizations in a wide variety of industries. He is proficient in XHTML, CSS and Javascript development, as well as PHP, and MySQL on the server-side. He has recently exhibited at trade conferences; Gartner Enterprise Content Management in Las Vegas and Search Engine Strategies NYC. Kelley is a native of Syracuse, N.Y. and has a B.S. in Information Studies & Technology from Syracuse University. He was the founding director of a 501c3 organization that has helped donate over $15,000 for multiple sclerosis research.


8 Responses to “Transparent Images Using PNG’s (Yes, Even in IE)”

  1. Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  2. Thanks a lot for another useful web page. Exactly where else could I get that type of info written in such a great way? I have a work that I am just now working on, and I’ve been on the look out for this kind of info.

  3. I’m finding a javascript error, is any person else?

  4. Wow! I’m very loving the layout on this web-site http://www.breakthroughdesign.com/blog/2009/04/transparent-images-ie-using-pngs. It is relatively simple, but still useful. Very often it truly is very difficult for getting that good balance between superb usability and appearance. I must say that you’ve done a amazing work on this. Also, your blog site starts super fast in my opinion on Safari. Superb site!

  5. This is the fitting weblog for anyone who wants to search out out about this topic. You understand a lot its nearly laborious to argue with you (not that I really would want…HaHa). You undoubtedly put a brand new spin on a topic thats been written about for years. Great stuff, just nice!

  6. Mira Repinski says:

    Good post. I learn something tougher on different blogs everyday. It should always be stimulating to learn content material from other writers and observe slightly one thing from their store. I’d choose to make use of some with the content material on my weblog whether or not you don’t mind. Natually I’ll offer you a link on your net blog. Thanks for sharing.

  7. I think this is a real great blog article.Really looking forward to read more. Much obliged.

  8. Such a gorgeous cover! I love the idea of a celestial Centurion. Heck, and going back to find out who killed him? Sweet. Gotta read this!

Leave a Reply

We will always build beautiful websites that rank high on search engines.

All About Us

Put simply, our work builds organizations. We've worked with organizations in both public & private sectors.
Read more

Contact

2610 S. Salina St.
Syracuse, NY 13205
Mon - Thurs 9am - 5pm
315.233.9283
info@gobdg.com

Get Started

People tell us there's a recession. Could have fooled our clients.
Get Started!