Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

IE6: How do I avoid the blue background color of PNG images in CSS

i am trying to avoid the background blue color in ie6 when we call PNG images.
i have a script that takes care of it when the image is called. but when the
image is called from css it doesnt work. it puts the blue square background.pl suggest.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <script language="JavaScript">
	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 handleOnload()
	{
		correctPNG();
	}
	window.attachEvent("onload", handleOnload);
</script>
<style>
	.bg {background: url("i.png" ) no-repeat left top;}
</style>
 </head>
 <body>
  <div class="bg">1</div><br />
  <img src="i.png" border="0" />
 </body>
</html>

Open in new window

i.png
0
yingwho
Asked:
yingwho
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
Suggestion #1 please write better titles thant "javascript" (I fixed that for you)
Suggestion #2 Why use PNG for background images. Why not GIF which all browser will understand now and forever
0
 
yingwhoAuthor Commented:
thanks mp. any answers guys?
0
 
David S.Commented:
Use one of these script instead:
http://labs.unitinteractive.com/unitpngfix.php
http://24ways.org/2007/supersleight-transparent-png-in-ie6


P.S. Why are you using a doctype that doesn't trigger "standards mode"?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
yingwhoAuthor Commented:
hi kram

those are for calling images straight. not for calling images from css.
0
 
David S.Commented:
They both work for inline and background images. (And both say that on those pages.)
0
 
yingwhoAuthor Commented:
thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now