Problems saving a png image

**soma104** · January 23rd, 2005, 02:02 PM

Hi,

I'm having problems saving a png image with photoshop 7. The image is supposed to have a transparent background for display on a web page. No matter what I try the image always seems to save with a slight gray background. I've read a bunch of online tutorials, and most of them just confused me more, but nothing seemed to get rid of the background.

I'm not trying to do anything fancy. I just decided to use png format because the drop shadow looked aweful in a gif format, and jpg was not an option due to the background texture on the webpage. I've attached a copy of the image in png format. I'm not sure what I'm doing wrong, or what step I'm missing. Any help would be very much appreciated.

Thanks in Advance
Soma

**Siliconjunkie** · January 23rd, 2005, 02:03 PM

Works right in FireFox, this is an IE bug with transparent pngs.

**soma104** · January 23rd, 2005, 02:14 PM

Firefox is a browser. Unfortunately that doesn't help much, since most viewer to the site will be using IE.

Are you telling me that I can't get a transparent background with png format?

Soma

**Siliconjunkie** · January 23rd, 2005, 02:30 PM

That is my understanding. Transparent pngs do not work right with IE. In firefox it displays normally.

**Siliconjunkie** · January 23rd, 2005, 02:32 PM

http://www.twistermc.com/twister/transparent_png.php

The problem is not with the png, it is transparent, just does not look right in IE.

**soma104** · January 23rd, 2005, 03:35 PM

http://tubes.ominix.com/art/electronics/

This site has a bunch of images that are all in png format, and as you can see, they are transparent. If you click on them to enlarge, then you see the gray background, otherwise, on this page you don't see it. So it is possible....I've just got to figure out how.

Soma

**OuTpaTienT** · January 23rd, 2005, 03:41 PM

See this thread: http://www.techimo.com/forum/t129194.html

**Siliconjunkie** · January 23rd, 2005, 03:42 PM

All I am saying is that in IE the image has a grey square around it, in firefox it does not. AND, IE has known problems with transparent PNGs.

Add those 2 up and you get your problem.

And, in Firefox on OS-X, I see squares around those even without enlarging.

**soma104** · January 23rd, 2005, 03:43 PM

Thanks a lot, Siliconjunkie, I just checked out the link you sent me. I followed the steps, and Voila, I have transparancy. Thanks again.

Soma

**Siliconjunkie** · January 23rd, 2005, 03:43 PM

I really wish I could do a screen capture on this crazy Mac.

**muno** · January 23rd, 2005, 03:44 PM

The thumbnails are jpg, once you open up the image it's png.
In ie, the png has light blue backgroun (no transparency), in firefox there is no background (transparency).

**soma104** · January 23rd, 2005, 03:49 PM

For future reference, I went to http://www.twistermc.com/twister/transparent_png.php , thanks to Siliconjunkie (my new hero).

I followed the steps laid out there, and it did work.

Thanks Again
Soma

**OuTpaTienT** · January 23rd, 2005, 03:49 PM

I don't understand why people use that method of an additional file, with the "blank.gif" thing. Why not just stick the code directly into the html or css?

**soma104** · January 23rd, 2005, 03:52 PM

Because it's all too complicated, for a novice like me.

I see instructions....I follow them....It works.....I'm happy!!!!

I haven't got a clue what any of it means, but as long as my problem was solved, I'll go with it.

If you've got an easier solution, that doesn't require me to know script....I'll try it.

Soma

**OuTpaTienT** · January 23rd, 2005, 04:10 PM

Don't know if it would be easier or not. Depends on how you do things I guess. I find this easier. You don't need two extra files hanging around for it to work.

Just copy this script into the <head> section of the html document. You can either put all this text in each html document that needs it or you can put it in a seperate file and use css to call that file.

Code:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   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
	     }
      }
   }
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->