Using PNGs a lot

Mint_Sauce

Mint_Sauce

Mint_Sauce

Soldato
Joined
25 Sep 2003
Posts
3,750
Location
Manchester
I'm building a website and using pngs due to their superior transparency over gifs. Someone we know though says the pngs are showing up but are outlined with grey so you can see the edges very clearly. He's using IE6 and has just upgraded to the latest version but the problem is still there. :mad:

Something is up! Is this a known issue or is his pc just acting up?

EDIT: Found out they're basicaly not fully supported by IE until version 7 so jpg and gif are still generally a better way to go for the time being.
 
Last edited:
i only use JPG for photos and never use gifs at all nowadays.

just use 8 bit PNG's and apply some matte?

alternatively, there are quite a few different ways to get IE6 playing ball with 24 bit PNG's, try google :)
 
Here's a javascript hack to make PNGs work in IE6...

Code: 
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; font-size: 3px;" + 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();
					}
				}
			}
	// *********************************************************************************************************************************
 
Thanks for that nav.
If it actually (kinda) supports background-repeat like they say it does, it's better than the current one I'm using. Do you know if it supports background-position?
 
You must log in or register to reply here.
Back
Top Bottom