Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2009-07-08
6
280 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

829 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