Ok, so I have been messing with these .png transparencies, and I gotta tell ya - these guys are tricky buggards, especially if you want to use them in your divs as backgrounds. If you use a transparent background in a <div> your links wont work in IE. So below is how to get everything to work just fine. *One note of apology - Mac Users - I'm sorry... I dont have one - so if it doesnt work on yours, please post your fixes.

First off to have transparent .pngs work in IE you need to use the AlphaImageLoader filter. This basically allows the alpha channel in the .png file to be transparent.

Below are examples of a transparent .png file used on different colored backgrounds.

I personally found that using the AlphaImageLoader filter in declaring each use of a specific .png graphic was difficult to get working and all in all just a pain to work with, so through the magic of google I found this great document, pngbehavior.htc, it controls the filtering of .png files and how the images render in IE.

Just place pngbehavior.htc in the same directory as your CSS style sheet - Download PNGBEHAVIOR.HTC

Then place this code in your CSS

<style type="text/css">

img {
behavior: url("pngbehavior.htc");
}

</style>

Note: You need to have a transparent gif called "blank.gif" in the same directory also - Download blank.gif

Using .PNG as a background image

Now that we have .png transparencies to work with just placing the image inside your document, now I want to address the difficult part, transparent .pngs as a background. If you look at the image above you can see that it is able to be done.

First, for Mizolla, its very easy - just use your transparent image as your background image and everything works out hunky dorey - BUT not for IE. The above div actually has two seperate css's, one for IE and then another for the other browsers.

First off I gave the above div a class called transbak and defined the class as follows

.transbak {
background-color: #66CCCC;
background-image: url(images/transparent-02.png);
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;
} 

For IE browsers I had to have a seperate style sheet defined - It was declared below my first style sheet

<!--[if IE]>
<style type="text/css">
.transbak {
background-color: #66CCCC;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/transparent-02.png', sizingMethod='crop');
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;
</style>
<![endif]-->

And there TADA! you know have your transparent div working - BUT - There is one more thing, what if you want to have text in your div and links? Guess what - if you just do it the way I described above - your links wont work - so now we need to fix that! Below you will see that the link inside doesn't work in IE

So all we really need to do is place the text inside another div and make that a positioning relative, and there ya go... it all works - I like to just have a class defined as IEFix and just make that class relative - and place the defined class in your [If IE] section

<!--[if IE]>
<style type="text/css">

.transbak {
background-color: #66CCCC;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/transparent-02.png', sizingMethod='crop');
height: 200px;
width: 300px;
background-repeat: repeat;
border: 1px dotted #000000;

.IEFix{
position: relative;
}

</style>
<![endif]-->

If you need to see how any of this was done, you can always look at my source.