...

View Full Version : Older versions of IE support pngs?



groog
06-25-2007, 09:25 PM
I have IE 6 but use Firefox. I always code for Firefox and later test it on IE later. I love pngs because it keeps the original image quality you were going for (jpgs= yuck!). I usually have several pngs with transparent backgrounds or opacities, which is another reason there so great (they support opacity). On other computers I try with IE 7 it always works fine, but whenever I try it with my IE 6 it have a white background where it's supposed to be transparent. Does IE 6 not support pngs? Do people really still use IE 6?

twodayslate
06-25-2007, 09:31 PM
Sadly, some people still use IE6. IE6 does not support .png transparency among other things.

groog
06-25-2007, 09:50 PM
dang, well thanks for letting me know. Do you think I should worry about IE 6 though? Or just ignore it and expect them to get IE 7 or Firefox.

_Aerospace_Eng_
06-25-2007, 10:05 PM
I think it really depends on your target audience though thats a drastic measure seeing as how everyone can't get IE7. People on Windows 2000 can't get IE7 at least not through an update. People on Windows SP1 also can't get IE7 until they get SP2.

jshl_wiz
06-25-2007, 11:31 PM
Nope, no PNG transparecy support. I know it, pitiful.

Graft-Creative
06-26-2007, 12:03 AM
You can fake it with javascript, like so: (put his somewhere between your head tags)




<!--[if lte IE 6]>
// Universal transparent-PNG enabler for MSIE/Win 5.5+
// http://dsandler.org
// From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
// and background-image code: http://www.allinthehead.com/retro/69
// also:
// * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
// * only do this once, to make it compatible with CSS rollovers

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/images/spacer.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "/images/spacer.gif";
}

}
}
}
<![endif]-->


Works quite well, though on large graphics, and a slow connection, it can look a bit wierd as it renders.

Folks with Js turned off will just see the usual non-transparent PNG that IE6 renders - though to me that's not a major problem, as most IE users that are sussed enough to switch JS off are sussed enough to expect a few visual oddities on the sites they visit.

Gary

groog
06-26-2007, 12:12 AM
I think it really depends on your target audience though thats a drastic measure seeing as how everyone can't get IE7. People on Windows 2000 can't get IE7 at least not through an update. People on Windows SP1 also can't get IE7 until they get SP2.

Yes, I have windows 2000. I guess I'll just have to do it the old fashioned way until IE 6 is no longer widely used.

elementis0
06-26-2007, 05:51 AM
Yes, I have windows 2000. I guess I'll just have to do it the old fashioned way until IE 6 is no longer widely used.

or do it the fun way and keep png's and force the user to get IE7/Firefox =P Eventually they will have to give in hehe.

_Aerospace_Eng_
06-26-2007, 07:15 AM
Works quite well, though on large graphics, and a slow connection, it can look a bit wierd as it renders.

You forgot script tags btw. ;)

To get around the images loading after the page loads you can use the defer attribute. Using defer the page will load with the graphics already transparent and you also don't need the load event.

<!--[if lte IE 6]>
<script defer type="text/javascript">
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/images/spacer.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "/images/spacer.gif";
}

}
}
</script>
<![endif]-->
Personally though I prefer this script as it doesn't require transparent gifs.

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum