Comments on: The Ultimate PNG Guide

By: Trevor

Trevor — Thu, 17 Jul 2008 02:04:25 +0000

@Brad-
What do you mean you ignored my empty div rule? Did you mean when I set the background image to blank.gif?

The only reason that is there is because we need to tell IE6, not to use the PNG we had previously declared as the background image, but instead use the PNG being passed in through the filter.

Does that answer your question?

By: Brad

Brad — Wed, 16 Jul 2008 21:11:15 +0000

Thanks, dude. This is awesome. I’ve been looking for a solution for tiling transparent pngs in IE. This seems to work a-ok.

One question:

I ignored your empty div rule, and just placed the line,

“filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’images/nameofimage-trans.png’, sizingMethod=’scale’);”

below the line where i declare the background-image for the div that i’m using it on in the css,

“background-image: url(images/blue-trans.png); ”

and it seemed to work fine. Is there a possible conflict with doing this?

By: Thomas

Thomas — Tue, 08 Jul 2008 17:38:15 +0000

After much tinkering, my problem lies with overlapping PNG’s where clipping occurs. Basically, my main body background is a PNG because I need the drop shadow. Two of the PNG images located in the main body have to be positioned outside of their DIV’s. The problem is when the PNG images overlap another PNG image, they are clipped.

http://tailored.previsuals.com/test.html

I am banging my head on this one.

By: Thomas

Thomas — Thu, 03 Jul 2008 00:05:24 +0000

Ok, I thought the problem was with the png fixes, but instead I realized it’s an IE6 negative margin bug. Thanks though.

By: Trevor

Trevor — Wed, 02 Jul 2008 03:13:01 +0000

@Thomas-
I think you are making your code way too complicated. Take a look at the examples that I did. You could reduce all of those lines of PNG fixes into 2 lines of code. My first suggestion would be to try reducing the code first, then see if that fixes your problem.

By: Thomas

Thomas — Wed, 02 Jul 2008 03:00:37 +0000

http://tailored.previsuals.com/test.html

Check that site out in IE6 and you will see what I mean.

My transparency is being done like so:

#flash{background:url(images/flash.png) no-repeat; azimuth: expression(
this.pngSet?this.pngSet=true:(this.nodeName == “IMG” && this.src.toLowerCase().indexOf(‘.png’)>-1?
(this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.src + “’, sizingMethod=’image’)”,
this.src=”images/blank.gif”):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace
(‘url(“’,”).replace(‘”)’,”),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + this.origBg + “’, sizingMethod=’scale’)”,
this.runtimeStyle.backgroundImage = “none”)),this.pngSet=true
); width:637px; height:295px; position:absolute; top:0; left:-14px; z-index:1; }

This ID selector is for the transparent image of the photographs.

Hopefully this helps.

By: Trevor

Trevor — Wed, 02 Jul 2008 02:30:19 +0000

@Thomas-
Do you have an example you can show? Is this only happening in IE6? Are you using the JavaScript fix or are you manually applying the PNG fix?

By: Thomas

Thomas — Wed, 02 Jul 2008 02:07:14 +0000

I’ve encountred a problem where the transparent images I’m using are positioned outside of their divs and when a png fix is applied, the part of the image that is outside the div is cut off.

Any thoughts?

By: Adrian Turner

Adrian Turner — Mon, 31 Mar 2008 21:35:19 +0000

Hey I really needed to know how to properly display png-24 alpha transparency in IE6. Great guide.

Thanks!!!

By: Jason

Jason — Mon, 31 Mar 2008 21:07:05 +0000

Has anyone figured out how to properly display png-24 alpha transparency on IE6? This has bugged me forever. I can use png-8 all day long, but of course IE6 likes to turn all alpha transparency to grey.

By: Bugfix para imagens PNG no Internet Explorer | Blue MUIOMUIO

Bugfix para imagens PNG no Internet Explorer | Blue MUIOMUIO — Thu, 27 Mar 2008 12:08:43 +0000

[…] Podem ler mais sobre este script em: http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/ […]

By: Matt Herzberger.com » Blog Archive » Here is your del.icio.us goodness for 03-18

Tue, 18 Mar 2008 08:27:08 +0000

[…] 4 - Trevor Davis | Blog | The Ultimate PNG Guide […]

By: Erika

Erika — Tue, 18 Mar 2008 06:20:46 +0000

This is so right on time. Thanks! :)

By: Trevor Davis | Blog | PNGs, the AlphaImageLoader Filter, and hasLayout

Trevor Davis | Blog | PNGs, the AlphaImageLoader Filter, and hasLayout — Fri, 07 Mar 2008 03:25:09 +0000

[…] recently wrote an article discussing how to use PNGs effectively in all browsers (including IE6). For work, I had to slice a site that used a lot of PNGs, and I ran into something that I had never […]

By: Trevor Davis | Blog » Updated Dean Edwards’ IE7 Scripts

Trevor Davis | Blog » Updated Dean Edwards’ IE7 Scripts — Wed, 09 Jan 2008 02:52:02 +0000

[…] I have noted in previous posts: Using Dean Edwards’ IE7 Script, The Ultimate PNG Guide, I am a big advocate of the Dean Edwards’ IE7 […]