Newer breeds of browser such as Firefox and Safari have offered support for PNG images with full alpha channel transparency for a few years. With the use of hacks, support has been available in Internet Explorer 5.5 and 6, but the hacks are non-ideal and have been tricky to use. With IE7 winning masses of users from earlier versions over the last year, full PNG alpha-channel transparency is becoming more of a reality for day-to-day use.
However, there are still numbers of IE6 users out there who we can’t leave out in the cold this Christmas, so in this article I’m going to look what we can do to support IE6 users whilst taking full advantage of transparency for the majority of a site’s visitors.
So what’s alpha channel transparency?
Cast your minds back to the Ghost of Christmas Past, the humble GIF. Images in GIF format offer transparency, but that transparency is either on or off for any given pixel. Each pixel’s either fully transparent, or a solid colour. In GIF, transparency is effectively just a special colour you can chose for a pixel.
The PNG format tackles the problem rather differently. As well as having any colour you chose, each pixel also carries a separate channel of information detailing how transparent it is. This alpha channel enables a pixel to be fully transparent, fully opaque, or critically, any step in between.
This enables designers to produce images that can have, for example, soft edges without any of the ‘halo effect’ traditionally associated with GIF transparency. If you’ve ever worked on a site that has different colour schemes and therefore requires multiple versions of each graphic against a different colour, you’ll immediately see the benefit.
What’s perhaps more interesting than that, however, is the extra creative freedom this gives designers in creating beautiful sites that can remain web-like in their ability to adjust, scale and reflow.
The Internet Explorer problem
Up until IE7, there has been no fully native support for PNG alpha channel transparency in Internet Explorer. However, since IE5.5 there has been some support in the form of proprietary filter called the AlphaImageLoader. Internet Explorer filters can be applied directly in your CSS (for both inline and background images), or by setting the same CSS property with JavaScript.
CSS:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
JavaScript:
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
That may sound like a problem solved, but all is not as it may appear. Firstly, as you may realise, there’s no CSS property called filter in the W3C CSS spec. It’s a proprietary extension added by Microsoft that could potentially cause other browsers to reject your entire CSS rule.
Secondly, AlphaImageLoader does not magically add full PNG transparency support so that a PNG in the page will just start working. Instead, when applied to an element in the page, it draws a new rendering surface in the same space that element occupies and loads a PNG into it. If that sounds weird, it’s because that’s precisely what it is. However, by and large the result is that PNGs with an alpha channel can be accommodated.
The pitfalls
So, whilst support for PNG transparency in IE5.5 and 6 is possible, it’s not without its problems.
Background images cannot be positioned or repeated
The AlphaImageLoader does work for background images, but only for the simplest of cases. If your design requires the image to be tiled (background-repeat) or positioned (background-position) you’re out of luck. The AlphaImageLoader allows you to set a sizingMethod to either crop the image (if necessary) or to scale it to fit. Not massively useful, but something at least.
Delayed loading and resource use
The AlphaImageLoader can be quite slow to load, and appears to consume more resources than a standard image when applied. Typically, you’d need to add thousands of GIFs or JPEGs to a page before you saw any noticeable impact on the browser, but with the AlphaImageLoader filter applied Internet Explorer can become sluggish after just a handful of alpha channel PNGs.
The other noticeable effect is that as more instances of the AlphaImageLoader are applied, the longer it takes to render the PNGs with their transparency. The user sees the PNG load in its original non-supported state (with black or grey areas where transparency should be) before one by one the filter kicks in and makes them properly transparent.
Both the issue of sluggish behaviour and delayed load only really manifest themselves with volume and size of image. Use just a couple of instances and it’s fine, but be careful adding more than five or six. As ever, test, test, test.
Links become unclickable, forms unfocusable
This is a big one. There’s a bug/weirdness with AlphaImageLoader that sometimes prevents interaction with links and forms when a PNG background image is used. This is sometimes reported as a z-index issue, but I don’t believe it is. Rather, it’s an artefact of that weird way the filter gets applied to the document almost outside of the normal render process.
Often this can be solved by giving the links or form elements hasLayout using position: relative; where possible. However, this doesn’t always work and the non-interaction problem cannot always be solved. You may find yourself having to go back to the drawing board.
Sidestepping the danger zones
Frankly, it’s pretty bad news if you design a site, have that design signed off by your client, build it and then find out only at the end (because you don’t know what might trigger a problem) that your search field can’t be focused in IE6. That’s an absolute nightmare, and whilst it’s not likely to happen, it’s possible that it might. It’s happened to me. So what can you do?
The best approach I’ve found to this scenario is
- Isolate the PNG or PNGs that are causing the problem. Step through the PNGs in your page, commenting them out one by one and retesting. Typically it’ll be the nearest PNG to the problem, so try there first. Keep going until you can click your links or focus your form fields.
- This is where you really need luck on your side, because you’re going to have to fake it. This will depend on the design of the site, but some way or other create a replacement GIF or JPEG image that will give you an acceptable result. Then use conditional comments to serve that image to only users of IE older than version 7.
A hack, you say? Well, you started it chum.
Applying AlphaImageLoader
Because the filter property is invalid CSS, the safest pragmatic approach is to apply it selectively with JavaScript for only Internet Explorer versions 5.5 and 6. This helps ensure that by default you’re serving standard CSS to browsers that support both the CSS and PNG standards correct, and then selectively patching up only the browsers that need it.
Several years ago, Aaron Boodman wrote and released a script called sleight for doing just that. However, sleight dealt only with images in the page, and not background images applied with CSS. Building on top of Aaron’s work, I hacked sleight and came up with bgsleight for applying the filter to background images instead. That was in 2003, and over the years I’ve made a couple of improvements here and there to keep it ticking over and to resolve conflicts between sleight and bgsleight when used together. However, with alpha channel PNGs becoming much more widespread, it’s time for a new version.
Introducing SuperSleight
SuperSleight adds a number of new and useful features that have come from the day-to-day needs of working with PNGs.
- Works with both inline and background images, replacing the need for both sleight and bgsleight
- Will automatically apply
position: relativeto links and form fields if they don’t already havepositionset. (Can be disabled.) - Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
- Detects background images set to
no-repeatand sets thescaleModetocroprather thanscale. - Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.
Implementation
Getting SuperSleight running on a page is quite straightforward, you just need to link the supplied JavaScript file (or the minified version if you prefer) into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
Supplied with the JavaScript is a simple transparent GIF file. The script replaces the existing PNG with this before re-layering the PNG over the top using AlphaImageLoaded. You can change the name or path of the image in the top of the JavaScript file, where you’ll also find the option to turn off the adding of position: relative to links and fields if you don’t want that.
The script is kicked off with a call to supersleight.init() at the bottom. The scope of the script can be limited to just one part of the page by passing an ID of an element to supersleight.limitTo(). And that’s all there is to it.
Update March 2008: a version of this script as a jQuery plugin is also now available.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
17/05/2009
Thanks a heap Drew. It’s so easy to implement compared to other methods.
Cheers!
Vote Helpful or Unhelpful
01/12/2007
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.
Vote Helpful or Unhelpful
01/12/2007
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.
Vote Helpful or Unhelpful
01/12/2007
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.
Vote Helpful or Unhelpful
01/12/2007
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.
Vote Helpful or Unhelpful
01/12/2007
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. :)
Vote Helpful or Unhelpful
01/12/2007
Often times “position: relative” alone won’t save you. Ingo Chao describes his workaround for this: http://www.satzansatz.de/cssd/tmp/alphatransparency.html
Vote Helpful or Unhelpful
01/12/2007
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
Vote Helpful or Unhelpful
01/12/2007
Super! It’s great that you’ve got scaling working, and the script is very well written too.
Vote Helpful or Unhelpful
01/12/2007
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!
Vote Helpful or Unhelpful
01/12/2007
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.
Vote Helpful or Unhelpful
01/12/2007
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!
Vote Helpful or Unhelpful
03/12/2007
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.
Vote Helpful or Unhelpful
03/12/2007
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.
Vote Helpful or Unhelpful
03/12/2007
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.
Vote Helpful or Unhelpful
04/12/2007
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.
Vote Helpful or Unhelpful
05/12/2007
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)
Vote Helpful or Unhelpful
07/12/2007
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!
Vote Helpful or Unhelpful
11/12/2007
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!
Vote Helpful or Unhelpful
14/12/2007
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!
Vote Helpful or Unhelpful
14/12/2007
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.
Vote Helpful or Unhelpful
17/12/2007
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.
Vote Helpful or Unhelpful
29/12/2007
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?
Vote Helpful or Unhelpful
07/01/2008
@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.
Vote Helpful or Unhelpful
10/01/2008
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!
Vote Helpful or Unhelpful
05/02/2009
This works great, but breaks instantly whenever you have a body onload event.
Any suggestions?
:)
Vote Helpful or Unhelpful
10/02/2009
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!
Vote Helpful or Unhelpful
10/02/2009
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.
Vote Helpful or Unhelpful
12/02/2009
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.
Vote Helpful or Unhelpful
15/02/2009
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?
Vote Helpful or Unhelpful
16/02/2009
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
Vote Helpful or Unhelpful
21/02/2009
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!
Vote Helpful or Unhelpful
23/02/2009
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.
Vote Helpful or Unhelpful
25/02/2009
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
Vote Helpful or Unhelpful
26/02/2009
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>
Vote Helpful or Unhelpful
04/03/2009
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.
Vote Helpful or Unhelpful
04/03/2009
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!
Vote Helpful or Unhelpful
11/03/2009
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
Vote Helpful or Unhelpful
14/03/2009
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>
Vote Helpful or Unhelpful
18/03/2009
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
Vote Helpful or Unhelpful
30/03/2009
Awesome, thanks a lot!
It’s the first lightweight script which actualy is easy to implement that I’ve come across.
Vote Helpful or Unhelpful
30/03/2009
well written script and great technique.. thanks
Vote Helpful or Unhelpful
02/04/2009
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
Vote Helpful or Unhelpful
07/04/2009
Thank you, this is awesome! For some reason I was really struggling to find an elegant solution to this and now I have it. :)
Vote Helpful or Unhelpful
15/04/2009
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).
Vote Helpful or Unhelpful
17/04/2009
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.
Vote Helpful or Unhelpful
20/04/2009
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
Vote Helpful or Unhelpful
30/04/2009
How could I use “Supersleight” on a xml file, please suggest me. I am looking forward to your answer.
Vote Helpful or Unhelpful
03/05/2009
That’s exactly what i was looking for, thank you :-)
Vote Helpful or Unhelpful
04/05/2009
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.
Vote Helpful or Unhelpful
05/05/2009
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!
Vote Helpful or Unhelpful
19/05/2009
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!
Vote Helpful or Unhelpful
21/05/2009
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!
Vote Helpful or Unhelpful
08/06/2009
Absolutely mind blowing article. This is the best article on IE PNG background problem topic.
Bundle of thanks!
Vote Helpful or Unhelpful
14/06/2009
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!
Vote Helpful or Unhelpful
18/06/2009
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.
Vote Helpful or Unhelpful
22/06/2009
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!!
Vote Helpful or Unhelpful
26/06/2009
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.
Vote Helpful or Unhelpful
26/06/2009
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!
Vote Helpful or Unhelpful
27/06/2009
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.
Vote Helpful or Unhelpful
27/06/2009
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 ?
Vote Helpful or Unhelpful
30/06/2009
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)
Vote Helpful or Unhelpful
13/07/2009
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
Vote Helpful or Unhelpful
20/07/2009
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.
Vote Helpful or Unhelpful
30/07/2009
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.
Vote Helpful or Unhelpful
01/08/2009
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>
Vote Helpful or Unhelpful
04/08/2009
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!
Vote Helpful or Unhelpful
05/08/2009
Thanks for your solution. I had been trying another way around but your script made things so much easier. I appreciate it!
Vote Helpful or Unhelpful
17/08/2009
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’) …
Vote Helpful or Unhelpful
21/08/2009
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.
Vote Helpful or Unhelpful
21/08/2009
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…
Vote Helpful or Unhelpful
22/08/2009
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
Vote Helpful or Unhelpful
23/08/2009
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.
Vote Helpful or Unhelpful
25/08/2009
Hi there,
Kindly guide me step by step on how to put this on my file.
I can’t make it work.
Thanks
Vote Helpful or Unhelpful
27/08/2009
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
Vote Helpful or Unhelpful
07/09/2009
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…
Vote Helpful or Unhelpful
08/09/2009
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.
Vote Helpful or Unhelpful
13/11/2009
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.
Vote Helpful or Unhelpful
01/12/2009
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.
Vote Helpful or Unhelpful
03/12/2009
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
Vote Helpful or Unhelpful
10/12/2009
This is exactly what I was looking for to save a site that looks good everywhere else but IE6. Thanks!
Vote Helpful or Unhelpful
17/12/2009
Very nice fix for the using-a-transparent-png-as-a-link in IE6 problem. Haven’t seen a full fix anywhere else!
Thanks —
Vote Helpful or Unhelpful
22/01/2010
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.
Vote Helpful or Unhelpful
24/01/2010
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.
Vote Helpful or Unhelpful
13/03/2010
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
Vote Helpful or Unhelpful
30/01/2009
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
Vote Helpful or Unhelpful
Impress us