Print Subscribe to Everyone's Blog about Web Design and your Online Business
Print Subscribe to Everyone's Blog about Web Design and your Online Business

Web Design and your Online Business

Welcome to Everyone's blog where you'll find me musing about anything related to online business and web design. One of my favorite pastimes is interviewing other people in the industry about how they deal with the challenges of designing pages for their clients. You will hear about everything from how to attract people to your site to making the page behave for any browser, new or old. If you've got an idea for a blog, or for a radio show on Blog Talk Radio, please drop me a line at blogtalk@everyones.com or just leave a comment here!

Second Interview with John Gallant Part One – PNG Images

Myra Rhodes - Wednesday, August 25, 2010

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 .

Comments
Post has no comments.
Post a Comment




Captcha Image

Trackback Link
http://everyones.com/BlogRetrieve.aspx?BlogID=7400&PostID=164835&A=Trackback
Trackbacks
Post has no trackbacks.


Newsletter Sign-Up




Subscribe me to your newsletter.