• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Transparent PNG backgrounds in IE6

dorfire

OSNN Junior Addict
#1
The solution is well known when we're talking about plain <img> tags, but it's not that trivial when we put the image as a CSS background.
I didn't want to convert my background images to GIF, so I wrote this Javascript code:
Code:
window.onload = function()
{
	var elementIdentifiers = ['element_with_png_bg_ID', 'id2', 'id3'];
	
	for (var i in elementIdentifiers)
	{
		var currentElement = document.getElementById(elementIdentifiers[i]);
		if (!currentElement) continue;
		
		var backgroundImage = currentElement.currentStyle['backgroundImage'];
		var backgroundImageUrl = backgroundImage.substring(5, backgroundImage.length-2);
		var filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader  (src='"+backgroundImageUrl+"', sizingMethod='scale')";

		currentElement.style.backgroundImage = 'none';
		currentElement.style.filter = filterString;
	}
}
If you want the code to be executed only in IE6 and lower versions, use this conditional comment:
Code:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="iepngfix.js"></script>
<![endif]-->
Hope it helps...
 

MikeRS

OSNN Junior Addict
#2
You might also want to look at IE7/8.js for working around a lot of the design flaws in Internet Explorer.

I've put it on a few websites before, and it usually does the job fairly well for those poor IE users left in the world. I like to write pages as the markup is intended to be used, but IE doesn't make it easy, heh.
 

Members online

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,960
Messages
673,237
Members
89,011
Latest member
grovo_test