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 .bulb.off {
  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>
</ul>

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 .bulb.off 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>
</ul>

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>
<![endif]-->

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?

Comments

santa's picture

great blog

liked your idea. thanks's picture

Hiring your venue and wedding caterer are probably the two most difficult things that you must prepare for. wedding caterer offers a complete wedding service designed to support and inspire you throughout your wedding planning process. Cultivate a good relationship with yourwedding caterer with these tips to follow and mistakes to avoid. Wedding Catering. Our staff knows what an exciting day this is for you, and we “vow” to make everything perfect. Repeatedly honored as caterer of the year nationally . We provide turnkey food catering services for all events such as parties, weddings, corporate outings and even your formal catering needs.Wedding Caterers - Find highly rated wedding catering vendors in your area. Search for wedding reception catering services reviews, vendors and more. Weddings provides the perfect destination to find wedding catering companies. best wedding goa caterers, with prices. Catering is one of the most important aspects of your wedding, contributing to the perfection of your day. We are the pioneer in the bespoke catering services providing best of fine dine experience with our different cuisine on your majestic events from wedding.

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
****************

exxe's picture

Free anal porn videos. Tons of hot Anal Porn Videos are waiting for you. Best ass porno movies. Anal Pussy Videos, Anal Porn Videos, Free Anal Sex Porn Videos. XXX porn, sex and hardcore tube, free pussy movies. Some of the hardcore sex clips

gratuit minecraft's picture

I'm certain you had a ton of fun composing this article.Excellent section!boom beach hack tool

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

hilky's picture

You're so awesome, man! I cant believe I missed this blog for so long. Its just great stuff all round. vinyl exam gloves

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.
http://www.amazon.com/Compression-Besta-Sports-Athletes-Hospitality/dp/B00R6OQGLK/

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 great-essay-writing-service.com 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.

hilky's picture

Your article is exceptionally intriguing and entertaining. From your article, I can see the genuine importance of the word glad. http://grand77.asia/

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

gratuit minecraft's picture

This is a decent and educational post. This post has bailed quite a few people out there. Yet, I am the one and only who'll acknowledge it.gratuit minecraft

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.http://menjual-crystalx-asli.blogspot.com/2013/12/efek-samping-penggunaan-crystal-x-anda.html

yilky's picture

Excellent point; it’s the truth what you are telling us about; thanks so much for the wonderful article. http://vettys.com/how-to-begin-your-life-as-a-flight-attendant/

gratuit minecraft's picture

I'm utilizing the same website stage right now This is an amazingly elegantly composed article. plastic card printing

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

hilky's picture

Do you have some other articles to propose on this topic.Thanks for your wonderful posting! click here

Anonymous's picture

This posting is stupendous and what a mind blowing examination that you have done.piratekings.game-cheats.ws

gratuit minecraft's picture

Your websites and each other substance is so captivating and helpful It makes me return once more. soft play hire

gratuit minecraft's picture

Happy to talk your site, I am by all accounts forward to more dependable articles and Happy to visit your site. KaylaItsinesReview.tumblr.com

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

wallens's picture

This article gives the light in which we can observe the reality. hay day tips This is very nice one and gives indepth information. Thanks for this nice article. cheat 8 ball pool

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

yilky's picture

You have raised a vital issue..Thanks for sharing..I might want to peruse more present issues from this blog..keep posting. related site

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

hilky's picture

This article, I accept numerous individuals are useful. Extremely blessed to impart this article to your.go here for the chaturbate tokens hack

hilky's picture

This is an incredible rousing article.I am basically satisfied with your great work.You put truly extremely supportive data. Keep it up. cheat 8 ball pool

Anonymous's picture

It's exceptionally decent site. I will seek this page again & again awesome rundown. halvimmat pikavipit

gratuit minecraft's picture

Keep up the wonderful bit of work, I read few articles on this site and I acknowledge that your site is genuinely captivating and contains heaps of splendid information .samsung fitness tracker

Guestress's picture

This blog could be the inspiring blog I ever seen! thanks for sharing :)sharing is sign of care :)

Situs Judi Bola Online

Judi Bola Online Indonesia

elvistoplist

mbt2you

hilky's picture

The matter you've highlighted above is unquestionably esteem capable for anybody to workout. the idea of your article is genuine and It will bring about a positive way.visit the site here

hilky's picture

i get new data, new thoughts to do somethings, i trust you will impart once more, i continue sitting tight for next post, much obliged.long term loans guaranteed approval

madam asoy's picture

this blog was really great, never seen a great blog like this before. i think
im gonna share this to my friends..

Situs Judi Bola Online

elvistoplist

mbt2you

fifov

Judi Online's picture

Seo techniques as well as include maximum degree of on the internet marketing principles in to our company techniques. homepage

Judi Online's picture

I always prefer to read the quality content and this thing I found in you post. Thanks for sharingJudi Online

madam asoy's picture

this blog was really great, never seen a great blog like this before. i think

im gonna share this to my friends..

Judi Online

Bola Tangkas

Judi Bola Tangkas

Bandar Judi Bola Online

Bola Tangkas

Judi Bola Online

Agen Bola

Judi Bola

madam asoy's picture

This blog could be the inspiring blog I ever seen! thanks for sharing :)
sharing is sign of care :)

Agen Bola

Bandar Bola

Bola Tangkas

Judi Bola Online

Judi Online

Bola Tangkas Online

Agen Judi Bola

Agen Bola

madam asoy's picture

This blog could be the inspiring blog I ever seen! thanks for sharing :)
sharing is sign of care :)

Agen Bola Online
Taruhan Bola Online

Bola Tangkas Online

madam asoy's picture

this blog was really great, never seen a great blog like this before. i think
im gonna share this to my friends..
Bola Tangkas
Agen Judi
Judi Bola
Bandar Bola
Judi Bola Online
Bola Tangkas

Judi Online

Taruhan Bola

Pages

Add new comment