Hello,

the plugin superleight isn’t compatible with jQuery version 1.9+

Because jQuery.browser methods are removed, they recommand using Modernizr

I am sorry but this didn’t work for me on a Zen-Cart based web site. It seemed to be going in the right direction but it somehow introduced additional artifacts.

I then tried the suggested Dean Edwards IE7 scripts and they were even worse – they did nothing…

So far, the solution that worked best was pngfix.js but it doesn’t work on background images in CSS.

I guess I will have to resort to some other creating methods (i.e. no PNGs at all).

Thanks so much for this. I built a site for a local drug store and used transparent pngs everywhere (www.harvestdrug.com). A lot of their clients still use IE6. This made it possible for them to use the site without unattractive white blocks behind everything. Thanks again.

One workaround for links becoming unclickable, that I think is worth mentioning:

If you want an image to repeat, using sizingMethod=“scale”, you can actually get away with it if you use a 1×1 pixel image – that won’t cancel the clickable areas on top, in most instances. Sure, this is not an ideal fix, but may come in handy – it’s worked for me a number of times, for example, adding a dropshadow repeated graphic. There’s something about the 1×1 pixel dimension that allows it to work, don’t ask me why.

For the interactivity thing, rather than giving links position:relative, apply it to an element that’s a parent of the links but a child of element with the PNG. If you need to slap in an extra div or something to make that possible, it’s probably worth it.

Oh, if you create your PNGs in Photoshop or any other editor that doesn’t let you omit gamma info, run them through PNGCrush or PNGGauntlet to prevent colour differences in browsers.

One final thing, if you’re using PNGs to give an element a single colour but semi-transparent background, don’t use a 1×1 pixel image else it’ll display differently in Safari 2.

Works great! Thanks for info.

One problem I’m having involves a:hovers.

For some subnav I’m putting together, I have my links set to display:block and then giving the a:hover a different background image. The mouseover does not seem to be working in IE6, nor does the pointer cursor remain for more than a split second.

Ideas and thoughts would be appreciated.

Oh, I do love this time of year! Another christmas, another 24 ways :)

Thanks for the great article, I’ll definitely be checking out SuperSleight as I’ve experienced the links-not-working-thanks-to-AlphaImageLoader problem several times myself.

Thanks Drew!

Looks like a great fix to me, clean, quick and most importanly avoiding the evil behaviour() application of some previous fizes. I’ve also had a pop at writing my own solution as well, but in the form of a jQuery plug-in. So if you’re a jQuery user/lover please take a look at my png-fix article, it might of use for some :o)

You’re better off not using hacks if you can avoid them. It’s worth pushing to find a way to avoid them too. All too often in the past I’ve had them cause more problems. Still, nice hack!

Thanks a heap Drew. It’s so easy to implement compared to other methods.

Cheers!

Hi there,

Kindly guide me step by step on how to put this on my file.

I can’t make it work.

Thanks

Thank you so much!

We’ve been struggling getting transaprent PNGs to work for IE6 on one of our clients’ sites and eventually supersleight has resolved the issue. A ‘must’ bookmarks for web designers and web developers.

My fix for unclickable links:
1) I found they’re are not really unclickable sometimes, the only problem was that cursor wont turn to hand/pointer. But I found out that z-index helps in some cases too.
so, foolproof solution is:
a {
_position: relative;
_z-index: 1;
_cursor: pointer;
}
Underscore hack makes sure only IE will understand this part of css, but it’s not mandatory, or you can use conditional tags if you like.
2) I don’t like position: relative cause you know, sometimes you need to use position in some other way, and found out that on my page I don’t need it, z-index and cursor: pointer do the trick without it.

OMG our lads have been working on alpha transparency effects and then we find you. well as MD of our company and always banging on about how good it is to give people a pat on the back when they do something smart. well here is your pat on the back well done and thank you for helping our guys and girls 9/10.

Phill MD

Many thanks for the post AND the comments.
Using IE6 for corporate wikis, I was completely stuck by this png transparency problem, mainly because of unclickable links, input, …embedded in a div with transparent png background.
Setting all these elements with css style “position:relative”, “z-index:1” completely fixed my problems.

Thanks again to all of you.

Thanks thats a good point bu this couldn’t solve my problem.. i want to learh how can i use transparent png image as background in ie6

First off, hurray for 24ways back again! Just another reason to love this time of year.

Second, great first post, Drew. Transparent PNGs have always been one of those things that really make me hate ie6, and I’ve tried (as have everyone else, I’m sure) many ways to deal with it. This seems like a pretty kick-ass solution; I’m looking forward to trying it out.

Wow, thanks a lot, finally a working solution! And for some reason you posted this article mere seconds before a project of mine went live. Thanks again.

I wish this had come along about a month ago when I was working on two projects that were heavy with alpha transparency effects over changing backgrounds!

As you have very nicely summed up the ideal approach on the implementation side of things, I’m wondering what your recommendation is for processing the PNGs after saving them from Photoshop? I was using GammaSlamma on the mac, but became concerned that it was only stripping the color profile (the primary goal for me, as that was visibly a problem in Safari vs. Firefox), and that other metadata was causing IE to crash.

Day 1 and you’re already tackling one of the biggest browser challenges this decade. Can’t wait to see what else you have in store for the other 23 days.

I’ve been using a solution called ‘IE PNG Fix’ (http://www.twinhelix.com/css/iepngfix/) which was written by Angus Turnbull at Twin Helix. It still suffers from the same issues though. I’ve never dissected it’s source code but I assume it’s essentially doing the same thing. :)

Often times “position: relative” alone won’t save you. Ingo Chao describes his workaround for this: http://www.satzansatz.de/cssd/tmp/alphatransparency.html

position:relative does not trigger haslayout. haslayout is involved, but at a preceding step: The filter does solely apply to elements that have “layout”. This is the reason why your script actually does not work for non-layout elements having a background png, say a simple div with some text in it, without a dimension. You would have to apply a haslayout trigger like zoom:1 for such blocks not already having layout. Links that do not work can be addressed by z-index/position:relative for the link, but not if the element with the filter is positioned. There is a workaround for this situation. http://www.satzansatz.de/cssd/tmp/alphatransparency.html

Super! It’s great that you’ve got scaling working, and the script is very well written too.

Thanks for the article Drew, the way IE handles PNG’s is pathetic. I have been looking for an elegant solution like this for a while and Ill definitely be using supersleight for future projects.

Another thing that I’ve noticed is that IE7 renders PNG8 images with the color slightly off. I don’t think there is a fix for this so it’s best to stay away from them.

This is a great update! I’ve been sharing both sleight and bgsleight with my students since inception. The scripts have saved many students from pulling their hair out! Now they no longer have to wade through and make sense of all of the comments related to the initial post at Drew’s allinthehead blog. Nice work. Thanks for the gumball mikey!

I still think the Dean Edwards IE7 scripts are the best solution to PNGs in IE6 and below. You just have to have the image end in “-trans.png” (but you can change the suffix if you want). Not only do these scripts address the PNG issue, but also a lot of other IE bugs.

My new favourite technique for alpha transparency is the use of PNG 8 graphics created with Fireworks which apparently is the only graphics package to export them according to spec. Proper PNG 8 images give you nice alpha transparency for nice browsers and index transparency for the others. In other words, a hack-free, single image solution that degrades gracefully. Check out this article: PNG8 – The Clear Winner

Obviously, if you absolutely require alpha transparency for IE6, this is not for you but in this day and age I think simple index transparency is good enough for IE6 users out there.

I’m a bit late to this christmas party, but hey…

Having recently battled with png transparencies and positioned elements containing links in IE6, I found that by actually cutting a hole in the png where you wanted focus (eg. where the input field will appear on the rendered page) let the cursor through the “AlphaImage Barrier”.

Obviously this is only going to be good for fairly static layouts, where the element that you want to interact with is of a fixed width, height and position relative to the containing element and would be a pain if it was required for more than a few images – but it worked for me!

Having played with this, and encountered a wee bit o’ oddity, I have a question about the “applyPositioning” logic. In the current supersleight implementation, that logic is applied to all A and INPUT elements with their style.position === ‘’ — but shouldn’t the logic that sets their position to ‘relative’ really just be restricted to those A or INPUT elements with a backgroundImage property that is indicative of a PNG (based on the file extension)?

(I ask because I ran into this when I first deployed supersleight, in that it was pushing around the background images on several A elements within my layout that were using GIF images for their background. I solved it by moving that if check up inside the logic that is applied when an element with a background PNG is found.)

Having asked all of that, however, thanks for writing this. Great hack!

Ron: The problem doesn’t just affect links with a PNG background image, but also links with an ancestor element with a PNG background image, or even links that interact with another such element due to positioning. That’s why the applyPositioning routine runs across all links.

drew, i wish you had written this article a couple years earlier. i found out about the unclickable links problem the hard way…i’ve still got a bruise from banging my head against my desk. it’s good to hear someone who knows what they talking about say that problem “cannot always be solved.”

thanks for writing.

Great article, very informative. However, I’m still learning, but there as been few times where I couldn’t find ways to use transparent gifs in place of pings. Should we sacrifice page-load for ping superiority when <a href=“http://www.w3schools.com/browsers/browsers_stats.asp”>33%</a> use IE6, and many still use dial-up? I look forward to the day when IE6 is long gone, gifs are obsolete, dial-up has been abolished, and perhaps pings have the ability to be animated…

Drew, any thoughts on Alex’s <a href=“http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/”>PNG8</a> article?

@martin : Great technique and article, a precision though: pngnq also creates those PNG-8 with alpha layer and it’s cheaper than Fireworks (sure, it’s open source). ErieStuff details how to install it under Windows.
You can then minify every PNG you create with OptiPNG (with -o7 option, it’s slow but you’ll do it once and the image will be read thousands of times), whether it’s created with Fireworks, pngnq or whatever.

Totally. Awesome. Script.

- but –

I added…

||obj.tagName==‘TEXTAREA’

…after

||obj.tagName==‘INPUT’

because it wouldn’t let me do text entry in a textarea field. I haven’t tested it, but I suspect it would do the same with <select> drop downs.

Thanks!

This works great, but breaks instantly whenever you have a body onload event.

Any suggestions?

:)

You just saved my day!

I installed your script thinking that I would have to replace all those repeating alpha transparent backgrounds like you have to in all other png-fix scripts.

I was surprised to see that ALL background images were FIXED right away and only thing I had to do is reposition 2 background elements.

Thank you, thank you, thank you!

I’ve noticed that pngs sometimes cause IE6 to crash. I’ve been going through and trying to find the root of the problem.

The page is validating 100% xhtml strict. It seems to be related to jquery and having large pngs on the page.

I comment one out and it works. My solution for now is to replace the larger pngs on the page with gifs or jpgs…. less than ideal considering the design I was given.

I have worked with many different types of pngs hacks and this is the first time I have come across this issue.

For those that might say it was my jquery code… even the link alone to google for the lib link was causing the issue.
I know this makes little sense but what else can you expect with ie6.

IE6 really sucks. I tested a few png-scripts and just ended up replacing the png’s to gif’s for IE6. Thanks for your script, but I really need to position and repeat background-images. None of the existing scripts does this.

Léonie.

It´s a nice hack, but a tried to apply it in a php code and it didn´t accept the Internet Explorer Conditional Comments

Any ideas?

The supersleight script worked like a charm. Before I’ve had to bow down and suck it up when it came to IE6 and alpha transparency however now it’s apparent that within the right CSS this can be used quite effectively. The only real change I needed to make was an addition to the conditional comment. Since you can’t apply a positioning attribute of ‘repeat’, I created two different background PNG gradients. One for one pixel width repeats used in all browsers but IE6 and the other, a full width gradient to be used with supersleight. The only thing I see is during the “onload” event, the gradient flickers due to the script routine. However it only has a duration of a few milliseconds and its better than the dreary solid PNG. Thanks a ton Drew, you’re a life saver!

- Anthony

Excellent script.

I couldn’t get it to work with repeating backgrounds but, as luck would have it, none of my backgrounds needed transparency, so I just excluded them.

Thanks for this – can’t wait for the day when IE6 is dead, buried and rotting. I keep looking at the stats but loads of people are still using the horrible thing!! Almost half of all IE users are still on IE6 apparently! When you consider that some estimates put IE users at 80% of all internet users, then that’s a BIG number!

Cheers mate!

http://dillerdesign.com/experiment/DD_belatedPNG/ I use this one and it’s relative small and easy to use and the background property’s are still available.

Hi,
great work!
One thing I’d like to add:
I changed the if statement from

obj.tagName == ‘IMG’ && obj.src.match(/\.png$/i) !== null

to

(obj.tagName == ‘IMG’ || (obj.tagName == ‘INPUT’ && obj.type == ‘image’)) && obj.src.match(/\.png$/i) !== null

That will also fix png pictures in an Image Button (input type=“image” src=”…”)

Stevo

I know its year 2009… more than a year since last comment. but it might help someone if they stumble on this.

The problem about unclickable link or form fields seems solvable (at least it worked for me).

i just used a div_tag to cover the div_tag where the image is suppose to be. eg.

#problematic_png_image { width: 750px; height: 500px; margin-top: 70px; margin-left: 105px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’/images/problematic.png’, sizingMethod=‘scale’);
}

<div id=“wrapper”><div id=“problematic_png_image”></div>
</div>

Someone else might be having the same problem that i had, so here goes:
If you applied any padding to an img tag (using css), this hack screws up the scaling and layout. Use margin instead and it works well.

This worked very well for me. I had to set applyPositioning to false since I was already using CSS to absolutely position a transparent PNG logo and some buttons on top of a JPG header image. After changing the applyPositioning setting I tried it in IE6 and it looks great. Thanks!

Hi,

This is a great tool. However, I tried to use it in this page with a transparent png and it’s not working properly. Any suggestions?

http://www.rockcreeksm.com/testing/humvee/test_transparency.html

thanks
Vincent

You stated:

Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

How is this done?

<script>
function changePNGtoSomethingElse()
{ //function to change PNG here //recall supersleight somehow here return;
}
</script>

I’ve got an issue when implementing the supersleight script to my XHTML 1.0 Transitional website using CSS2.1

First off, the transparency and ‘unclickable’ issues are resolved, but for some reason when using the script (or even older png fix scripts) it tells the background color in my outer div wrapper to be ‘on top’ of everything else.This site that i skinned was tricky because the background of the main content area had to have an irregular background image that, as the site expanded past the fold, would display more of it (which i might add, was a pain in the ass to figure out).

This dark blue background color issue has thrown me for a loop. Any thoughts? the site’s URL is http://ship7.bserved.com/index.htm

Awesome, thanks a lot!

It’s the first lightweight script which actualy is easy to implement that I’ve come across.

well written script and great technique.. thanks

Hi all!

I was wondering if anyone else was having this problem: the javascript works perfectly when the page is viewed locally (although in IETEster), but fails when the content is uploaded onto a server.

Thanks,
Kelly

Thank you, this is awesome! For some reason I was really struggling to find an elegant solution to this and now I have it. :)

Hey,

First of all, many thanks for this awesome solution !

A few observations :

- I’ve added the following to fnLoadPngs to handle input elements of type ‘image’ :

// input elements
if (obj.tagName==‘INPUT’ && obj.src.match(/\.png$/i) !== null){ el_fnFixPng(obj);
}

- Strangely enough, the ‘submit’ button/image on the following page :

http://www.poligraf.net/en/contact/

was resized to an height of 33px by the script when using the ‘scale’ sizingMethod. It works fine with the ‘image’ sizingMethod.

Hope it helps !

Best wishes,
Chris

How could I use “Supersleight” on a xml file, please suggest me. I am looking forward to your answer.

That’s exactly what i was looking for, thank you :-)

Also, I saved all my PNGs as GIFs and it worked. Bad quality, though. But I needed to add special effects to the image and this “broke” the effects.

Often this can be solved by giving the links or form elements hasLayout using position: relative; where possible.

Thank you thank you thank you! Came across your post when Googling for a solution to this intractable and irritating issue, and you saved me many more hours of banging my head against the desk.

All these years later, you’re still saving lives. Thanks again!

Thanks for this. I knew there was a JS for this, but I couldn’t make it work. This really saved my bacon. Thanks again!

Absolutely mind blowing article. This is the best article on IE PNG background problem topic.

Bundle of thanks!

Should the path to x.gif in the .js file be relative to the CSS or the HTML document? I am doing this on a wordpress site locally:

I have the path as:

<code>
// Path to a transparent GIF image var shim = ‘/wordpress/wp-content/themes/blank2r/images/x.gif’;

// RegExp to match above GIF image name var shim_pattern = /x\.gif$/i;

</code>

what am I doing wrong? My png’s still have a grey bg in IE6.

Thanks!

Gosh, after searching for hours – I can’t thank you enough for this post. I had been using innerHTML to insert info in a div – with no problems, until after implementing the transparent png fix, all of the sudden the links become unclickable.

In my case, calling the hasLayout function via setting the position:relative worked.

Thank you, thank you.

Thank you so much! I’ve been using the pngbehavior.htc fix for a long time now, but all of a sudden I couldn’t get it to work on a particular site. I then came across your article here in my searching for a new solution, and not only has it saved me, it works so much better than what I was using previously.

Again, thank you so much!

i want to interact with is of a fixed width, height and position relative to the containing element and would be a pain if it was required for more than a few images – but it worked for me.

Thx…

A quick question… how would we use the supersleight.init() if i want to set it to only to take the pngs on the #header for example ?

I’ve found a solution to the background-position and repeat problem on this site: http://www.dillerdesign.com/experiment/DD_belatedPNG/ (I have not tested this yet as I just found it, but looks promising)

OK. This works awesome. However, I have run into an issue I can’t figure out. I am using Longtail’s Video Player (JW Player) on a site for some flash video. I have realized in IE 6 that the video gets disabled with…

<!—[if lte IE 6]>
<script type=“text/javascript” src=“supersleight-min.js”></script>
<script type=“text/javascript” src=”../supersleight-min.js”></script>
<![endif]—>

However, if I take out

s2.addParam(“wmode”,“transparent”);

from the JW player script with the SuperSleight Script enabled, the video works .

Any idea what might be causing “wmode”,“transparent” to not let the video play while I am using the SuperSleight script?

Thanks a million!!!

Matt

Amazing. I was certain that my specific design/configuration would require that I rummage through your script and tweak things by hand, but I simply added the conditional javascript load as you stated in my code, dropped the javascripts in and blam! worked like a charm.

I am exceedingly impressed. Great job.

On a totally unrelated sidenote, look up a series by a guy named Professor Walter Veith called ‘Total Onslaught’, specifically the lecture called ‘The Mists of Time’. I think you would be quite mindblown if you studied that topic out.

I’ve put together a quick mootools version of this: http://www.m2tm.net/Programming/mooSuperSleight.js

In use examples:
//This will apply it to every element on the page. This is the same as passing in {‘selectors’:[’*’]}
<script type = “text/javascript”>
new MooSuperSleight();
</script>

//This will apply it to all elements with a class Alpha
<script type = “text/javascript”>
new MooSuperSleight({‘selectors’:[’.Alpha’]});
</script>

//This will apply it to most elements people style with pngs and specify a non-default shim (default is just blank.gif in the root folder.)
<script type = “text/javascript”>
new MooSuperSleight({‘selectors’:[‘img’, ‘div’, ‘input’, ‘section’, ‘article’, ‘aside’, ‘header’, ‘footer’, ‘ul’, ‘li’, ‘h1’, ‘h2’, ‘h3’, ‘h4’, ‘h5’, ‘h6’, ‘h7’], ‘shim’:‘images/blank.gif’});
</script>

We are using DD_belatedPNG for all our alpha PNG requirements now. It doesn’t use filters so side-steps all of the filter nastiness (like non-repeating bg images.

So far it seems very stable and rather brilliant really!

Thanks for your solution. I had been trying another way around but your script made things so much easier. I appreciate it!

To fix same issue with textarea field for jQuery plugin change last if statement to this:

if (settings.apply_positioning && self.is(‘a, input, textarea’) …

We have a number of reseller sites (for different products) and i was in the process of building one for sandbags and really need to use PNGs to build what had been designed.

This solution is really simple – one quick change to the JavaScript to correctly pick up the gif and the fix worked. It is part of a menu system and i encountered no problems at all.

Thanks for your work I for one really appreciate how good this is. With IE6 support likely to be needed long into the future this is a god send.

with this solution we get two dependencies: first js must be activated and activex must be allowed. i’d prefer the use of conditional-comments only. with all these scripts the latencies grow higher and higher…

Ie 6 sux. why not it’s officially declared as died thing.

Link was not working for transparent images. Tried for several hours to find solution. Finally “position:relative” worked.

Thanks for the great tips.

Hi all. I’ve had this working on another site before, but can’t seem to get it to work on www.imperialllp.com and when i went back to my other one for help this had also stopped working? I’m very confused lol.

If anyone can help it’d be much appreciated.

Thanks

thanks a lot for the script and the article, i have one question, Why “ActiveX controls” warning appear on my browser (i test it on IE7)? other website that using your trick did not…

Hello,

Would anyone mind to help a frustrated newbie please?

I want to place a png image with a drop shadow edge over a photograph background. It works beautifully in firefox :-/

I have linked the js file
<!—[if lte IE 6]>
<link href=“css/ieonly.css” rel=“stylesheet” type=“text/css” />
<script type=“text/javascript” src=“scripts/supersleight.js”></script>
<![endif]—>

I am not sure if there is something else I need to do? In the CSS file?
Thank you.

Thanks Drew!

I had the unclickable links problem in IE6. Thankfully, adding position: relative to trigger hasLayout worked in my case.

You’ve saved me from much potential frustration.

Genuis!

I program for a lot of clients and this is by far the most useful piece of code I have stumbled on for design. Older browsers always seem to take you a step back when you are creating something magnificent and it’s a blessing to have programmers who share these codes to prevent the rest of us form doing such time consuming tasks.

Thanks :-)

“Links become unclickable, forms unfocusable “

I’ve been trying to solve this problem all morning, so thanks for your article.

The ‘ position: relative; ‘ in my a:link solved the issue.

I’m going to experiment with using the IE hack to place a gif on IE pages and a PNG on everything else. Something along the lines of:

background-image: url(image.png); /*i.e.5 hack */ “\”}\”“; background-image: url(image.gif);

Cheers again

R

This is exactly what I was looking for to save a site that looks good everywhere else but IE6. Thanks!

Very nice fix for the using-a-transparent-png-as-a-link in IE6 problem. Haven’t seen a full fix anywhere else!

Thanks —

Super thanks for this script. It’s 2009 and there are millions of IE 6 users out there. We are doing some funky stuff with images include dragging them around to create beautiful designs, email them etc.

And this script just fit right in without having to remove/tweak any of our existing code, events, mouseovers etc.

Couple of key changes we did, and I would recommend to others:
1. We added a custom property origsrc to the image obj in this script, because after this script the img.src points to x.gif. So any onclick events get x.gif instead of the original src. The origsrc property serves that purpose.
2. We also remove the regex .png/$/i..and include simple indexOf(”.png”) check. This is because some image paths can contain parameters e.g .png?tmstmp=123123123123123

To see the full blow potential of this script, check out

http://www.oblinq.com/oblinq

drag, resize, move around, z-index, mouseover, mouseclick all of that works perfectly!

million thanks again!

Rahul

Hey all,

I just realize that this solution don’t work when a onload event is set on the BODY tag. I don’t know why, but sounded intriguing. You any of you could explain me what happens in this particular case, I’d be very grateful ( murilo#knj-art.com ).

Thanks!

Nice fix.
thou i found an even better one, and easier to use too. uses
Microsoft’s implementation of VML instead of Microsoft’s AlphaImageLoader filter.
Find it here> http://www.dillerdesign.com/experiment/DD_belatedPNG

Nice tut though!!