Dan Olsavsky's Blog

Wednesday, January 9, 2008

A Non-JavaScript, Repeating .PNG Fix - That Works!

I was looking for a non JavaScript way to use .png's with ie6... however there was a catch, it had to repeat. I found this code and I added it to a site... and it works (*wipes sweat from forehead)!!! The code goes in your CSS so you don't have to edit the HTML, add the .htc file to your root directory.

Note: The first selector triggers the .htc behavior

.fixpng, img {
behavior: url(../iepngfix.htc);
}
#columnContainer {
background-image: url(../images/content-bg.png);
behavior: url(../iepngfix.htc);
background-repeat: repeat;
}

Read how Bob edited this code so that the .png's will repeat (brilliant):
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

If your not familiar with .htc files, you can read about them here: http://msdn2.microsoft.com/en-us/library/ms531018(VS.85).aspx.

So... you noticed that ie6 is trying to adjust the gamma on the .png!
Well, youre an observant little developer arent you! You can strip the GAMMA information out of the .png file using TweakPNG (Windows only):
http://entropymine.com/jason/tweakpng/

The directions for TweakPNG:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=153#7

For those of you who prefer to use JavaScript
Here is the jQuery version of this, however, I don't know it's limitations;
http://campbellsdigitalsoup.co.uk/about/png-fix

- Dan Olsavsky

posted by dano at 9:25 AM

1 Comments:

Blogger Kevin L. O'Brien said...

There are two issues I discovered with using this that I wanted to pass along.

First, in the iepngfix folder you can download, there is a "blank.gif" image. The .htc file uses this as a target; if it isn't in place, the browser creates a missing image box around your PNG image. The blank.gif has to be placed in every folder and sub-folder that has an HTML file that will use a PNG image. It cannot be placed in the image folder or the .htc file will not be able to find it.

Secondly, you must specify a width and height for your PNG image in the HTML code, or the .htc file will try to stretch it to fill the div it is placed in.

Other than that, I found it worked very well.

July 18, 2008 8:24 AM  

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.