Transparent PNGs and Black Borders in IE 8 with Javascript

Internet Explorer is the bane of all Web programmer's existance. Well, IE6 was. IE7 was an improvement, but still not that great. IE8 was a big step forward, and I'm sure IE9 will be even better.

Notwithstanding that we now need 4 sets of conditional style sheets, IE8 still has a major limitation with transparent PNGs.

IE6 simply cannot render the alpha transparency of a PNG-24 image properly. There are some techniques to get around this, and most involve using a 1x1 transparent GIF as an overlay, and using a Microsoft-proprietary "filter" called AlphaImageLoader. The best example I have found is this 24 ways article.

IE6 is on its way out, and IE7 can render the alpha channel, so there's no problem anymore, right? Wrong. If you apply an animation using Javascript and jQuery, such as fadeIn() or fadeOut(), IE creates black space where the opacity exists and refuses to behave. And it's not fixed in IE8. :( Here's an example: I'm working on a project that has light bulbs as graphical elements. The "off" bulb is supposed to appear like so:

Firefox Internet Explorer

bulb off

bulb off IE

bulb on

bulb on IE

My markup was like so:

#lightbulbs .bulb, #lightbulbs {
  background: url('bulb-off.png') no-repeat 0 0 transparent;
  float: left;
  width: 75px;
  height: 75px;
  margin-right: -40px;
<ul id="lightbulbs">
    <li class="bulb off"><span>1</span></li>
    <li class="bulb on"><span>2</span></li>

So, how do I fix this?

The fix

I could just use PNG-8. But that's not going to cut it here. The semi-transparent bulb and the glow from the "on" bulb will be lost. And I can't use a solid background here either.

This discussion thread has an overview of the various workarounds. Though there's only one that appears to work the best:

  1. wrap the element in a container <div> and animate the container
  2. use the Unit PNG Fix

Unit PNG Fix is a script that uses a 1x1 GIF, just like the other IE6 fix, but it should be applied to all versions of IE.

The working code

So, I revised my code like so:

#lightbulbs .bulb, #lightbulbs div {
  background: url('bulb-off.png') no-repeat 0 0 transparent;
  float: left;
  width: 75px;
  height: 75px;
  margin-right: -40px;
<ul id="lightbulbs">
  <li class="bulb off"><div><span>1</span></div></li>
  <li class="bulb on"><div><span>2</span><div></li>

Which applies a height and width to the inner <div>, and gives that the background image. I then added this conditional comment in the <head> portion of the page:

<!--[if IE]>
<script type="text/javascript" src="unitpngfix.js"></script>

Which target's ALL IE, not just IE6. And now I'm rockin'.

I can't use background-position or background-repeat on any of these elements, which is a bummer. Luckily I'm not doing that for any alpha transparency. If I needed to position it, though, I'd just added extra whitespace in the graphic file itself. Not pretty, but it works.

Has anyone found a better solution?


santa's picture

great blog

Jain James's picture

As we all know, Since 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 device content to still be accessible for users.
powered backups

ram14's picture

Year 2013 has been quite eventful. SRSG also witnessed events and evolved in terms of business verticals, technologies, people and processes.
Apple product reseller in Mumbai
Soundcraft mixers dealers
Dejero Live
ipad dealers in Kolkata

Heather R. Holst's picture

You will see so many people providing writing services for students. But its not an achievement to get custom written research papers, actual achievement is to get quality work done at reasonable price. For this purpose I will suggest you to contact brainwriting team where I have found awesome people always ready to help you.

wallens's picture

Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return.
entertainment news

david001's picture

Thanks for this post and here you will get essays writers. No topic how hard-working, diligent and skilled a student is a few day he will not be capable to manage with a enormous amount of educational work. But every task should be done, every duties should be fulfilled.

celen's picture

Things are exceptionally open and strongly clear clarification of issues. was genuinely data.

justinssadamss's picture

After you write Associate in nursing essay, it is not uncommon for it to need some quantity of revision. After all, none people write utterly, particularly throughout the primary time. Rewriting permits North American country to infuse the essay writing here with further ideas, further as amend any issues with each structure and clarity.

max's picture

A Sequel money loan is brief unprotected cash enhance instant payday loans which will use your postdated check as security. If you'd form of every day enhance money loan however would love more an opportunity to pay it returning, a Sequel money loan could match well for you.

aliceseo's picture

I am very happy to find this site. I wanted to thank you for this immense read!! I absolutely enjoying every petite bit of it and I have you bookmarked to test out new substance you post. Civil Engineers West Midlands

celen's picture

I added it to my top picks blog site list and will most likely be inquiring soon. I was exceptionally satisfied to discover this site.

Anonymous's picture

Intriguing post and I truly like your thoughts on the issue. I now Have an unmistakable thought on what this matter is about.paleo diet

Anonymous's picture

Much thanks to you for your well-thought content. I'm truly at perform legitimate at this point! So I should run off with no perusing through all I'd like. Quantum Vision Reviews

hilky's picture

I am extremely appreciative too you for this sharing..It is exceptionally helpful for my composition venture I get enough data for my writing. career

hilky's picture

I respect the significant information you offer you inside your articles. clash of king hack

hilky's picture

Why is is recommended to visit Mordo Crossword Website ?
Our database contains 60000 crossword definitions, and more than 100,000 solutions !!!!
All the answers are arranged by the numbers of letters, So It is simple to find the answer.
 you can also add the site to your favorites, and use the search bar in the site, i promise you will not disappointed !!!
usa today crossword

embossitworld's picture

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers.
health news

hilky's picture

I have added to my favorites.I get a ton of incredible data here and this is the thing that I am hunting down. loans with bad credit

Add new comment