Solved

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

Posted on 2009-07-08
6
283 Views
Last Modified: 2012-05-07
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
Comment
Question by:yingwho
  • 3
  • 2
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24812691
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
 

Author Comment

by:yingwho
ID: 24815633
thanks mp. any answers guys?
0
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 24816512
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
Technology Partners: 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!

 

Author Comment

by:yingwho
ID: 24816850
hi kram

those are for calling images straight. not for calling images from css.
0
 
LVL 42

Expert Comment

by:David S.
ID: 24816906
They both work for inline and background images. (And both say that on those pages.)
0
 

Author Closing Comment

by:yingwho
ID: 31601363
thanks
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Wordpress and Wufoo 1 36
Worldmap 1 28
I really need help in my css for such a simple change, but can't find the code to do it 13 51
web page freezes after ajax post 7 41
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question