In my first interview with John Gallant, we received some insight to the baffling problems encountered by web designers when web pages are viewed in different browsers. In this, the second interview on Blog Talk Radio, John begins with a discussion on how to handle PNG (Portable Network Graphics) files. PNG images, John explains, allow you to ‘see through’ parts of the image that are transparent. They also work well for smooth gradients. Graphics Interchange Format (GIFS) also offer transparency. However, GIFs come with their inherent ‘jagiess’ that make it difficult to fade out to transparency around a curve. With PNGs there is no such thing as jaggies, because rather than going from opaque to transparent, the edges of an irregular image can fade out to transparency. You can then lay the PNG on top of any background and it will show up beautifully. John still recommends JPGs (Joint Photographic Experts Group) for the display of photos.
Of course, on the downside of PNGs, John explains that they don’t work correctly in IE6. This particular browser puts a blue background behind all PNGs and that destroys the transparency of the image. There is hope, though, even for IE6 with modern scripts that are used to detect the CSS that is being applied to the PNG and correct the problem. John provides some examples of links to the scripts that will assist you in correcting these problems with IE6 (please see below).
John goes on to point out the differences between the handling of PNGs as foreground images as opposed to background images, recalling that with IE6, the PNG is loaded into a div so it is no longer a background image. Therefore positioning of a background PNG image in IE6 is simply not going to happen.
There is one more thing, John says, a bug, that you need to be aware of with PNGs. Sometimes form elements and links can become ‘unclickable’. Sometimes giving these elements ‘Position: Relative’ will fix these elements. Sometimes it will not. Some developers avoid these issues completely by using simpler images such as GIFs for the IE6 browsers, or simply use text instead of images and use a conditional comment to let IE6 know not to use the PNGs.
For a list of the links that John refers to and to listen to the full interview please go to: http://www.blogtalkradio.com/everyones/2010/06/14/css-junkie-john-gallant-second-interview .