Hi all. I am wondering if there is an absolutely definitive way of fixing transparent PNG's in IE6?
I have a fix in place for transparent images in the header and footer of my developing Moodle theme, but the code for these fixes is per-image. As there are only2 images, possibly three, I am happy with this solution for now.
I cannot make the background solid as the images are on top of a graduated fill.
As I use PNG's over more of Moodle, and I have to make the site look good in IE6, I want a one-shot, add-to-the-header fix which will sort out PNG's no matter where I add them.
The code I used to sort out my header and footer images is 'discussed' (ranted about!) in a blog post: http://vaughany.com/blog/2009/07/code-should-not-have-to-be-so-fugly. Also, in the comments, check out the YUI reset-min script for 'normalising' styles across browsers.
Regards,
Paul.
Paul > I am wondering if there is an absolutely definitive way of fixing transparent PNG's in IE6?
Yes, get rid of IE6. It never was a good browser anyway. If you must have an MS browser, upgrade to IE 7 or 8.
Joseph
Yes, get rid of IE6. It never was a good browser anyway. If you must have an MS browser, upgrade to IE 7 or 8.
Joseph
Indeed! If it were up to me everyone would be using Firefox or Opera, but sadly it isn't anywhere near my control, so thanks anyway.
I have to agree with Joseph - there is no such script/way that can handle all pngs everywhere in IE6. Many sites really use different png fix javascripts but none of them is perfect. Most designers/web sites (98% since April!!!) do not support IE6 anymore and Microsoft does not release any security or other updates to IE6 - it should be time to forget IE6...
See for example one of the most popular fix scripts DD_belatedPNG and known issues in http://www.dillerdesign.com/experiment/DD_belatedPNG/#lacking
Thanks for the link, I'd not come across this fix before and will look into it.
The most common method used is the IE filter.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png', sizingMethod='scale');
The way it is usually set up is in its own style sheet because it is a Microsoft proprietary method.
So set up a style sheet such as ie6.css then add the following
.yourPngItem{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');}
.yourPngItem2{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test2.png', sizingMethod='scale');}
Then all you need to do is link the stylesheet to the header of your site.
For more info see:
http://support.microsoft.com/kb/294714
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://www.alistapart.com/articles/pngopacity/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png', sizingMethod='scale');
The way it is usually set up is in its own style sheet because it is a Microsoft proprietary method.
So set up a style sheet such as ie6.css then add the following
.yourPngItem{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');}
.yourPngItem2{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test2.png', sizingMethod='scale');}
Then all you need to do is link the stylesheet to the header of your site.
For more info see:
http://support.microsoft.com/kb/294714
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
http://www.alistapart.com/articles/pngopacity/
The main problem with all this kinds of png fix scripts or methods is that none of them work correct with all png inside all possible elements of IE6. With single images on web pages they all work well.
If you want to compare some of those other scripts iepngfix.htc from http://www.twinhelix.com/css/iepngfix/demo/ and http://www.twinhelix.com/css/iepngfix/ may be the most often used script in addition to previous DD_belatedPNG and you could also try for example
Unit PNG Fix http://labs.unitinteractive.com/unitpngfix.php#docs
or SuperSleight http://24ways.org/2007/supersleight-transparent-png-in-ie6 and jQuery version http://allinthehead.com/retro/338/supersleight-jquery-plugin
Like Joseph said the best cure is to forget IE6 and use a better browser.
My recommendation is to ask yourself whether or not you want to continue supporting IE6 - if you do, then don't use transparent PNGs. If you don't care, which more people shouldn't, then use them without a fix.
Something a bit more constructive, I suppose, is to use styles_ie6.css to call up alternative background images (or no background images at all) to present the ie6 user with something appealing, albeit less nice. There have been thoughts like this rolling around the design community for the past few months. Here is Zeldman's take on the idea.
Something a bit more constructive, I suppose, is to use styles_ie6.css to call up alternative background images (or no background images at all) to present the ie6 user with something appealing, albeit less nice. There have been thoughts like this rolling around the design community for the past few months. Here is Zeldman's take on the idea.
Well said, Patrick!
Users of moodle may also upload png images everywhere - also to such attachments or resources that IE6 would never be able to use as transparent png and png images may not always have png extension - for example this graph
,null,0,0,,,black,1,none "Graph")
is shown as svg for ff and png for ie with code http://www.imathas.com/editordemo/php/svgimg.php?sscr=-7.5,7.5,-5,5,1,1,1,1,1,300,200,func,sin(x),null,0,0,,,black,1,none but png fix would not probably recognize images produced by different filters at all...
Users of moodle may also upload png images everywhere - also to such attachments or resources that IE6 would never be able to use as transparent png and png images may not always have png extension - for example this graph
is shown as svg for ff and png for ie with code http://www.imathas.com/editordemo/php/svgimg.php?sscr=-7.5,7.5,-5,5,1,1,1,1,1,300,200,func,sin(x),null,0,0,,,black,1,none but png fix would not probably recognize images produced by different filters at all...