The Ultimate PNG Guide
I would say one of the coolest things in web development/design is the creative use of PNGs. Although, it’s a little hard because of the way that IE6 handles them.
I have already written about Using Dean Edwards’ IE7 Script, but I wanted to take it a step further and talk more about PNGs.
To Review
First, download the Dean Edwards script. Next, extract the files to the root of your webserver in a folder called ie7. It needs to be in this folder, because some of the scripts have a dependency on the folder.
Finally, just include the script in the head of your document using conditional comments:
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->Ok, so now when you want to have the script “fix” the PNG in IE6, you just have to have -trans.png as the suffix of the filename of the image.
An Example
Now, I am no designer, but I have mocked-up a simple page to show some usage of PNGs.
Since the background on the body is the repeated diagonal lines, we cannot use a GIF for the rounded corners, because we aren’t sure where the corners will intersect with the lines on the bottom.
In an ideal world, this is how I would want to mark the page up.
But, in IE6, the PNGs have a blue glow around them. So if we apply the Dean Edwards scripts to the page, we see the bottom image disappears (keep in mind you have to be looking in IE6 to see this problem). This is because the script is applying the IE proprietary filter property, and once this applied, we cannot position or repeat a PNG.
So let’s change the way we are marking it up so that the bottom shows up in IE6. Basically, we have just added an empty div that contains the bottom background PNG.
Now we just have to worry about the repeated background of our main content area. In order to get rid of the blue glow, we have to apply IE’s filter property, which means that we can’t repeat it.
But, if we apply the filter property manually and change the sizingMethod to scale, we can give the effect of repeating the background.
div#container div.inner {
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/wp-content/uploads/2008/01/container-bg.png', sizingMethod='scale');
}Basically, it’s just stretching the image to fit the area, but since it’s a simple image that we were going to repeat anyways, it looks fine stretched.
In Conclusion
Hopefully using a combination of these two PNG fixes can provide you with enough to get things looking good in all browsers.
Anyone have any other solutions?
This is so right on time. Thanks! :)
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.
Hey I really needed to know how to properly display png-24 alpha transparency in IE6. Great guide.
Thanks!!!
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?
@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?
@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.
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:
This ID selector is for the transparent image of the photographs.
Hopefully this helps.
Ok, I thought the problem was with the png fixes, but instead I realized it’s an IE6 negative margin bug. Thanks though.
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.
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?
@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?