PNG IE Browser Issue Solution

{ Posted on Oct 07 2009 by Ryan Montilla }

PNG is the best image file extension in the web, especially in transparency matter. However being a PNG file is not yet perfect to one browser, the Internet Explorer. So some of the designers and programmers are annoyed to IE browsers because of this problem including me especially when I was in the middle of rush web development.

IECSS

I tried a lot of hacks in IE about PNG transparency but some of them are not well to be follow because the CSS hack need to be place in every head tag of our HTML file. I am coding with one design about the basketball template which is need to be done immediately. From the first time I saw the template, it needs to be a PNG including the background. It’s really challenging because this will be the first time to do a lot of research again about PNG transparency in IE.

The problem is solved guys so your search about CSS hack for PNG stop here at my site. One advantage of this hack is you don’t need to insert the css in every head tag of your html file so it is very convenient.

Please follow the tutorials below.

.header{
background-image:url(../images/header.png);
height:150px;
width:866px;
background-repeat:no-repeat;
behavior: url(“iepngfix.htc”)
}

The behavior: url(“iepngfix.htc”) is the hack file that need to be added in your css file. Once you added this file code, IE browser will bow to you. hehehe…

Click Here to view the sample

Subscribed with my site for more tutorial updates

Possibly Related Posts:

Share and Enjoy:

If you enjoyed this post, make sure you subscribe to my RSS feed!

This entry was posted on Wednesday, October 7th, 2009 at 2:41 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

11 Responses to “PNG IE Browser Issue Solution”

By J. Hendrix uitmuntend-webdesign.nl on Oct 7, 2009 | Reply

I always use unitpngfix.js, works perfect for all my projects.
A link to the .js file needs to be placed in the head tag though.
Next time I’ll try out your technique.

If you place PNG’s on your website be sure to use TweakPNG (or something simmular) to downsize the files and make the colors look the same in every browser.

btw: your downloadlink doesn.t work
By Ryan Montilla r3.elasticweavers.com on Oct 8, 2009 | Reply

Thanks for the heads up about the download link. It is now working well and try to redownload again.
By ben on Oct 8, 2009 | Reply

d/l isn’t working
By Ryan Montilla r3.elasticweavers.com on Oct 8, 2009 | Reply

The download link works perfectly. Please click the download button again.
By J. Hendrix uitmuntend-webdesign.nl on Oct 8, 2009 | Reply

After designing lots of websites that needed PNG transperancy I came to the conclusion that there is no ultimate PNG fix (yet).
Every PNG fix had some good and bad qualities, you just need to pick the wright fix for the wright project.

My review of this fix:
THE GOOD
- very easy to implement:
place iepngfix.htc and iepngfix.php in root and place
“html { behavior: url(“iepngfix.htc”) } in css

THE BAD
- other background-positions than “0 0″ of .png wil not work
- the background-repeat is stretched, in some cases this will look distorted
- the fix only works on backgrounds not on png’s that are placed in the html

Johan
By J. Hendrix uitmuntend-webdesign.nl on Oct 8, 2009 | Reply

Forget my comment about not supporting png transperancy for img src’s.
That didn’t work because the blank.gif is missing in the demo, perhaps you should include it (and also place a png inside the html)?

This is a pretty good fix because it is much easier to implement than most js and jquery png fixes that you have to paste in the head tag of every page (although if you’re templating that should be no problem).
It just lacks background-positioning and background-repeat now, but most png fixes do.
By seo web design ebizwebworks.com on Oct 9, 2009 | Reply

My comment would be Why only versions 5.5 & 6? Because Windows IE versions prior to 5.5 do not support the filter which fixes the PNG problem, and version 7 (not yet released at the time of writing in January 2006) is reported to have fixed the issue entirely. The code can be used either by a one-time copy-and-paste or as an include file. The entire thing is completely ignored by all other browsers – in fact it is treated as an HTML comment – thanks to IE’s conditional comments. This solution is therefore light, portable and non-invasive to other browsers.
By Ryan Montilla r3.elasticweavers.com on Oct 12, 2009 | Reply

This hack is good for IE 6 Up!
By facebook hacking software facebookhackingtool.blogspot.com on May 24, 2010 | Reply

Wow! This is valuable info, am into all this… gr8 stuff mate