It doesn't have to be anymore…

Just like with anything else in today's society, the web design industry has come a long way over its years. Advances in design, advances in development, and most importantly to me, advances in the way we get things to work!

I remember a time, where I would be given a completed design, wondering 'how am I gonna make this work', the only problem, was the client had already approved it, so I had no choice but to make it happen. My choices in graphics at the time were JPG and GIF. JPG's were great, as long as the design didn't call for any transparencies. And GIF's would be suffice, in the event a minor drop shadow was used on something that wasn't a solid color, but they gave you a nice little edge around it, that you hoped the viewer wouldn't notice. PNG files existed, but not that you could use on the web.

So we fast forward a couple years, to a time where we now have Firefox & IE7, being the most popular, we'll even throw in Safari for the sake of example. As graphics have continued to advance, and designs become more detailed and involved, the use of PNG's are becoming more and more popular, and lets just say 'our best friend'. Well, for me, as a front-end developer, they have. But wait, there is browser that we must not ignore, the infamous IE6, how could I forget. Needless to say, it hasn't always been easy to please this browser when it comes to more advanced designs; however we have now managed to discover a way to integrate the use of PNG files, while keeping all browsers happy, including IE6.

Now, I'm not much for loads of JavaScript files and lots of lines of unnecessary code, and when building a site, simplicity within your code is key. With just 3 basic lines of CSS, we allow the integration of PNG's amongst all browsers, everyone's happy, user doesn't know the difference, and the end result is permission for the use of more advanced graphics. Here's the proof:

The following images are the exact same PNG image, only difference is, one has the CSS integrated, and the other doesn't. The graphic on the left is how you would see it in IE6, without the CSS applied, gives a shade of blue background to anything that is supposed to be transparent. The one on the right is how you see it properly in all browsers accepting of PNG's, and also how you will now properly see it in IE6 once the CSS is applied to it.


.logo {width:325px; height:155px;}html>body .logo {background:url(images/logo.png);}*html .logo {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.website.com/images/logo.png");}Just put this in your CSS and you're good to go:

Here's the break down:

Line 1 - apply all your attributes, other than background imageLine 2 - insert background, this is for browsers that display PNG's just fineLine 3 - insert background using a global link, this is for all the IE6 users

See, now that wasn't so bad!