The IE PNG Fix

[~J~]

Quick question for you web experts.

Just finishing off my works website and I was wondering if you still think it's necessary to add in the IE PNG hack?

It works brilliant in IE7 (thank God they fixed it!) but don't want a nice looking website ruining if there's still a wide audience of users running IE6 (or below!)

Do you web guru's still put this in?

 

[Shoseki]

Good question, I have simply avoided PNGs at this stage, but am curious because one of my current project heavily relies on them.

 

[Tripnologist]

I usually just feed IE6 a different version of the image instead of a png. That way, IE7, FF, Opera, etc. users will get all the eye candy and IE6 users will get something that doesn't look quite as nice but doesn't ruin the layout.

 

[Nate]

The majority of web users is still in favour of IE 6 therefore you would need the png hack in, otherwise those users will get the horrible grey where there should be transparent!

 

[Dj_Jestar]

I usually just feed IE6 a different version of the image instead of a png. That way, IE7, FF, Opera, etc. users will get all the eye candy and IE6 users will get something that doesn't look quite as nice but doesn't ruin the layout.

 

[~J~]

Cheers folks, will go for an alternate non-PNG version for the IE6 users.

Thanks again.

 

[Sic]

yeah, I find the non-PNG is the most reliable route to take. I've not found a Xparent PNG hack that I can get to work, so people just see a lo-fi (gifs replace pngs and everything degrades in an acceptable way) version of the site in IE6 for work-related stuff, and a lo-fi version with a hide-able 'your browser sucks' message for personal stuff. I've been looking today and it seems that Firefox has overtaken IE6 in the w3c browser stats, which is nice.

 

[Augmented]

I've been looking today and it seems that Firefox has overtaken IE6 in the w3c browser stats, which is nice.

It's not much of a surprise as most of the w3schools traffic is web-developers, so their stats are a bit biased. And I'd expect the stats from the actual W3C.org site would show an even greater Firefox usage.

In reality I believe Firefox's market share is still very low across the board, and will likely remain that way indefinitely. The important stat to watch is the IE7 takeup which appears to be increasing quickly over IE6.

 

[Sic]

It's not much of a surprise as most of the w3schools traffic is web-developers, so their stats are a bit biased. And I'd expect the stats from the actual W3C.org site would show an even greater Firefox usage.

In reality I believe Firefox's market share is still very low across the board, and will likely remain that way indefinitely. The important stat to watch is the IE7 takeup which appears to be increasing quickly over IE6.

I can't believe I'm actually saying this, but I don't care if people actually start using Firefox - just as long as people start adopting IE7, that's fine by me. I have far less problems with CSS and IE7 than I ever have with 6.

 

[GravyMonster]

I know it's always best to avoid non-standard methods, but if you absolutely positively must use PNGs, I've copied in some javascript below which converts any PNG images in the page to use the microsoft alpha filters for IE so it works in all browsers based on IE 5.0+.

png.js

addLoadEvent(correctPNG)
			
	// *********************************************************************************************************************************
			function correctPNG() { // correctly handle PNG transparency in Win IE 5.5 & 6.
			   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
			         }
			      }
			   }    
			}
	// *********************************************************************************************************************************

	// *********************************************************************************************************************************			
			function addLoadEvent(func) {
				var oldonload = window.onload;
				if (typeof window.onload != 'function') {
					window.onload = func;
				} else {
					window.onload = function() {
						if (oldonload) {
							oldonload();
						}
						func();
					}
				}
			}
	// *********************************************************************************************************************************

 

[KevinCB]

I use it on my pages also, works like a charm

 

[Sic]

doesn't work if you've used the images in your css though

 

[LazyManc]

It's not much of a surprise as most of the w3schools traffic is web-developers, so their stats are a bit biased. And I'd expect the stats from the actual W3C.org site would show an even greater Firefox usage.

In reality I believe Firefox's market share is still very low across the board, and will likely remain that way indefinitely. The important stat to watch is the IE7 takeup which appears to be increasing quickly over IE6.

Agreed, I'd say it's probably more like 80-85% IE to 10-15% Firefox (others 5%), with the IE portion made up of 55-45% in favour of IE6, although this is rapidly changing over the last few months and IE7 will probably overtake IE6 after christmas.

*PS or at least it is here at work...