Cool! Never knew it could be done that way.

oi..hongkiat..i linked u to my blog :) good stuff…hitswhore!

Yea I couldn’t be bothering doing to to my site, I’ve got so many PNGs on there any majority of people use Firefox and soon IE7 so if your lazy.

There are a few drawbacks to this method.

The first is that this is an ActiveX filter, so people who have security features blocking ActiveX controls might have a problem seeing it.

The other is that if you want to put any information inside the div where you have the png as a background, it won’t show up. This AlphaImageLoader puts a mask over the entire div that it’s applied to, so any fields that are interactive won’t be able to be accessed, such as form elements.

The way to get around this would be to use the following structure:

#outerdiv { positioning of background and interior information }

#middlediv { AlphaImageLoader script with png as background, no positioning }

#innerdiv { positioned inside the above two divs, with your information }

The innerdiv’s relative/absolute positioning will cause it to float above the background div, letting you get to text fields or form buttons. The outerdiv will let you position this entire thing so that you can move it around the page.

Hope this adds a little more for those trying it out.

Thx for the tip.I was looking for it .

Adam:Firefox is soon to be taking over. This is to cover up the loophole of IE6

Ryan: Your method works too, and thanks for providing another alt solutions to this.

[...] Oh how I hate IE, at least this hack tells you how to fix one of its hundreds of fatal flaws. *Kicks IE in the face*. Useless Microsoft junk.read more | digg story [...]

…and it doesn’t validate :-(

I just make my code W3C compliant. If someone wants to use a non-compliant browser, their loss.

Here’s some more info on what I was talking about:

http://spiltmilkmedia.com/ryan/blog/?p=221

Love it, but how can I implement this on an enterprise level? I know I can make my graphic designers drool if I tell them I can seamlessly integrate all those transparent gradients they want to use, but isn’t there a better way than creating 3 DIVs with individual CSS definitions? Can we at least use all this code in the ?

The BODY, that is…

You only need three divs if you want to position the element, and then also have some interactive elements inside.

If you just want text, don’t worry about the fact that the AIL filter will mask your div, and just use one.

Doesn’t IE 7 handle .png transparencies OK?

seriously - WHY ON GOD’S GREEN EARTH would you bother with this?
look at the fat chunk of shit that you have to maintain now as a result of this senseless hack.
even maintained a site that uses this “trick”

no thanks - stick to something simpler - or do a better job when designing.

you’re asking for trouble.

Yes, it is a “shitty” solution - but don’t blame the messenger - this is IE’s fault. It’s a “good” hack that opens up fantastic site builds.

Another downside which is rarely mentioned: there is *NO* way to get alpha transparent PNGs to work in IE using HTTPS (including this hack).

We’ve also noticed some inconsistencies with color using this method as well.

Good hack - but test often and KNOW THE LIMITATIONS.

[...] Hong Kait has a great tutorial on making those pesky PNGs work cross browser: [...]

Well Lazy, I’m not quite agree with your statement. It alwz been a web designer’s dream to have a image format that truly supports tranparency (something better than GIF). no point doing graphics that only cater on the specific background right? Don’t you use gif transparency?

There are a couple hacks in javascript to automatically perform this hack, so that you don’t need to manually maintain css files. For example, have a look at the IE7 javascript hack (http://dean.edwards.name/IE7/). It includes many other “fixes” to fix IE’s shitty engine.

Lazy11: This isn’t a senseless hack, it’s what you have to do to get a PNG transparency to work. I didn’t write IE, but I did have to figure this stuff out to make IE work correctly.

And I suppose if we are supposed to do a better job with designing, that means we can never use transparency again?

IE7 renders alpha channels correctly, so there is only a year or so before most users will have gotten past IE6, and we can look back on this and laugh.

Until we get to that point, go ahead and shun clever tricks to design a page the way you want, not the way Microsoft wants.

Thanks i was needing this, very nice work.

[...] hentay xmen Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you how this can be solved. iceman xmenread more | digg story [...]

[...] http://www.hongkiat.com/blog/2006/12/17/making-png-image-transparency-work-in-internet-explorer/  [...]

At my site, I’ve used the following pngfix.js downloadable from http://alufis35.uv.es/websvn/filedetails.php?repname=spip&path=%2Fmollio%2Fbranches%2F1.9%2Fjs%2Fpngfix.js&rev=0&sc=0

Regards
Pablo

[...] The Solution To Many Web Designers Problems [...]

How many people still use IE5? Everyone won’t be using IE7 in year, or in 4 years.

cool hack btw

[...] 24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Making PNG image transparency work in Internet Explorer [...]

[...] story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> [...]

I’ve seen this hack before on alistapart, and I’d love to use it but the limitations put me off. Mostly the fact that it wont validate. I like to write accessible semantic xhtml and if that means a little less bling then so be it. After all it may look pretty but what does it add to the value of the page? Not enough to justify the hack IMHO.

At least a possibility, if needed, …

the easiest way to do this is to simply load pngfix.js by http://dean.edwards.name
also, do not make it “if gte IE 5″…it is better to make it “if lte IE 6.9″, that way IE 6 and below will use it but now IE7, which does png transparency just fine.

One note though, and something to try with yours, make an image a link; then see what part of the image is left. I made some style image links for menu. Only the actual image was clickable…the part that was transparent got totally ripped out. Food for thought.

While I commend your effort, a simple link/attachment in the head of your html to the pngfix.js file cures all the headaches.

Great effect but if you use multiple pngs, it means multiple divs and lots more css..dang.

[...] Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you one way how this can be solved. « Adobe Photoshop CS3 beta on friday   [...]

Also don’t forget that it looks like a background, but in fact it is an ActiveX object. The problem with this is that you can’t use background positioning. I ran into this trying to use a PNG using this technique and have it align to a DIV’s bottom (for a drop shadow). I could have added an extra DIV, but didn’t since I believe in semantics.

[...] Making PNG image transparency work in Internet Explorer via 24th Floor (via command_tab): A good (and succinct) redux on how to get PNG’s alpha working properly in Internet Explorer. (tags: IE hack CSS png graphics tutorial) [...]

this is awesome…

[...] Fonte: hongkiat.com Scritto da Peppe [...]

Links for 2006-12-21 [del.icio.us]…

24th Floor - Technology, Web, Tips, Tutorials, Jokes and my life. » Making PNG image transparency…

[...] Directly inserting PNG images with transparency in Internet Explorer will leaves you with a big white spot in webpages. This tutorial shows you how this can be solved.read more | digg story [...]

[...] [来源] [...]

[...] 如何在 IE 上让 PNG 图片显示透明效果 无损压缩的 PNG 格式越来越招 web 设计人员的喜爱，但是直接在页面中插入一个透明背景的 PNG 图片后在 IE 里会显示成难看的空白。这篇教程用一段代码完美的解决了问题，详见原文。 (tags: ie) [...]

pretty good method for the stupid IE.

[...] Another way: http://www.hongkiat.com/blog/2006/12/17/making-png-image-transparency-work-in-internet-explorer/ [...]

Doesn`t work for me. I get no image. Moreover, I get no more image even in Mozzila and Opera. The code is probably interfering with something… My properties are defined into a separate .css file. How do you integrate that piece of code into the .css file? Bloddy I.E….

perhaps you can send me your codes and I’ll take a look for you

[...] Making PNG image transparency work in internet explorer. [...]

Not sure why folks would criticize something that simply provides an additional possible approach for something that may help even just a couple other folks. If it doesn’t help you, fine… but from what I’ve read, it does help quite a few others.

I probably won’t use it, but I like the thoughts and information provided, the positive follow-ups, and the time you took to share your findings.

Negative comments should never discourage innovation…

A long and interesting read. I have just finished a site for a local rock band and wanted the eye-candy that I think should go with that type of site. Png’s offer the creative flexibility I want. so any help to get around sodding IE is to be applauded. I’m glad that the majority of comments have been positive even if those commenting may not use this particular fix. Respect to anyone who offers solutions to problems. It’s how things move forward. No?. Personally I’m glad I found this site. Cheers.

Thanks for your tips….

is there a way to get this to work from an inported css in a conditional comment? - I can get it to work inline but not via inport

** import that is

[...] signature image comes in PNG format and is really flexible to be used in any medium. Read "Make PNG transparency work in Internet Explorer" if you have problem blending them to a [...]

thanks for explaining this! good stuff!

At my site, I’ve used the following pngfix.js downloadable from http://alufis35.uv.es/websvn/filedetails.php?repname=spip&path=%2Fmollio%2Fbranches%2F1.9%2Fjs%2Fpngfix.js&rev=0&sc=0

Regards
Pablo
===================================================
Thats really brilliant ;) well done,
now i dont have to put the image in div and add a style.

Regards,
Amr

This works in IE but sadly, nothing shows up in Firefox :(

i use php script. nohack

first of all, thanks a lot for the solution, i’ve been looking for it for some time :)

second, there’s a possibility to implement this without conditional comments, since your method is considered as a “hack” why not make it simplerwith the use of another one using just CSS? :)

The following “hack” works in Firefox, Opera, Konqueror & Safari:

*|html .classname { }

and the best thing about this “hack” is that any version of IE doesn’t “see” it. So you can have:

div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}

*|html div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

without cluttering up HEAD section :)

oh, and btw wordpress doesn’t play well with apostrophes… you might want to insert code section inside <code> tags, so that when people copy/paste it they won’t have any problems. sorry, if that was mentioned somewhere above in comments, didn’t read ALL of them :)

That’s good, thanks for the tips :-)

[...] everyone knows how to do this but I thought that this might be a useful article for some people! Make PNG transparency work in Internet Explorer Registered users do not see these adverts. Register for free now __________________ If [...]

hey man thanks so much for the nice tip. i can use it in many places.

This is a fantastic solution, and have been using it for a while now with really good results. The hack is definately well worth it, and I don’t see why people have to post useless negative comments when it’s obviously helping people.

The image appears blank in firefox or safari on windows or a mac. I even tried your example.

anime fetish…

anime fetish…

uniform sex series…

uniform sex series…

Ryan,

that was a great fix. i am using a conditional statement to pull a specific div for IE that will allow for png backgrounds. I then relatively positioned another div inside and the form works.

thanks

[...] شفاف، شفافيت، اينترنت اكسپلورر لينك به منبع لاتين: Make PNG transparency work in Internet Explorer دانلود كد: [...]

[...] Make Transparency Work in Internet Explorer Cross-Browser Variable Opacity with PNG: A Real Solution The main difference between cutting and overlapping websites is thinking of your html/css as an extension of photoshop, versus an extension of something like imageready. Photoshop comps are designed and built with layers, transparency, and the grid in mind. Imageready takes what is in photoshop, flattens it and cuts it up into pieces, which are to be put together with html and css. The two sites that inspired this post both have use of pngs. The first, Bedford Brown, designed by Jeff Reynolds drops a big hood ornament on the website and it looks great, not to mention adds depth and interest. The second, was my attempt at borrowing some of that element for Nicholas Galanin’s website. [...]

Does the PNG repeatable in IE?

another way to do this is to add a background color to the PNG file. IE6 and lower will display the background colors; other browsers will obey your transparency instructions. A utility called “TweakPNG” can do this: http://www.mywebsite.force9.co.uk/png/edit-png.htm

Adding a background color using this utility is NOT the same as adding a layer in Photoshop, matching the colors and flattening layers. You are actually editing the PNG files specifications.

I realize this won’t work where your background isn’t simple but this solution doesn’t require any coding at all.

[...] 原文: Make PNG transparency work in Internet Explorer 翻译:PARAN [...]

yea this doesn’t work in IE5 or IE6, just checked it’s not working for me.

The working example doesn’t work because the image is linked as “flower.png” in one place and “flower-transparent.png” in another. With that changed, it works properly in FF and IE6.

yes in sample code, name of the image need to change. But problem is that in IE6 I’m getting a security warning.

[...] the coding for IE6 to accept transparency u can have a look at here if u have problem fixing it Make PNG transparency work in Internet Explorer Boonage - Freedom is [...]

. . It’s always good to notice that sometimes this technique won’t work unless you explicit specify width and height for the container element.
. . Altought you did it in the article, you didn’t stressed out this need and most people won’t do that (’cause most of time it’s not a desirable behavior).

. . Amplexos.

Good work,

just one thing to make it perfect - rename flower-transparent.png to flower.png since CSS in transparency.html is written for this image. In article itself there are also mentioned two different filenames, but I suppose that only one image needed.