In the spirit of a great debate regarding the proposed death of Internet Explorer 6 (IE6) over at the about.com Web Design Blog (article found here), I have decided to post a few useful tools for checking a website's browser compatibility. I must say that I strongly support the adoption of newer, better web browsing standards, and it is definitely time for IE6 users to upgrade.

1. MultipleIEs - Allows user to install old versions of Internet Explorer, 3.0 up to 6.0. Unfortunately, it does not work in Windows Vista. Free.
2. IE NetRenderer - A very nice online tool that will take a screen shot of the URL of your choice using IE 5.5, 6.0, 7.0, and 8.0. Free.
3. BrowserShots.org - Probably the most well-known of all the cross-browser testing websites, it supports an amazing amount of browsers, browser versions, and many operating systems (Unix, Windows, Mac OS, BSD). Offers free and a priority (paid) service at $29.95/month.
4. CrossBrowserTesting.com - The most comprehensive cross-browser testing tool. Very cool how it works. Neat pay-as-you-go credit system. First 5 minutes free.
   

Have another to add to this list? Post it in a comment!

This is kind of an old problem, but...

Has anyone had to deal with the frustration of working on a site and having a hell of a time trying to figure out what to do about the default alpha transparency rendering in IE6 (or, lack thereof)?

I know there are a few fixes out there but none of them actually offer a solid fix for BOTH of the problems; including PNG's used as background-images.

The well-know fix, aptly named PNGFix, uses a small javascript to invoke the correct filtering in IE6, which is great for images inserted with an <img> tag. BUT, what about background images? There is a newer version of PNGFix (2.0 Alpha) which is claimed to have resolved this issue, but it is very buggy and had unwanted results when I used it.

So, what is the solution? This.

<!--[if lte IE 6]>
<style>
DIV#name-of-div
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
</style>
<!--[endif]-->

DIV#name-of-div <----- name-of-div should be changed to the name of the div containing the background image path/name-of-div-background-file <------ eg. images/background-image-1.png Insert this bit of code into the <> tag and... Prest-o Change-o!

To add multiple background images just apply it multiple times, like so:

<!--[if lte IE 6]>
<style>
DIV#name-of-div1
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
DIV#name-of-div2
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
DIV#name-of-div3
{
background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=path/name-of-div-background-file, sizingMethod='scale');
}
</style>
<!--[endif]-->


Enjoy!