CSS - Pngs In Ie6

Hello from Kenya,

I am helping a fellow Peace Corps volunteer with his site and have encountered a problem. I am using PNG images to create a fade effect that blends with the background image. Looks great in Firefox, but, even after the PNG IE fix, the PNG files seem to be rendering a bit darker in IE. Tried taking the images out of the div and table and still have the same problem. Take a look and see what you think:

frester ~dot~ com

Thanks so much for your thoughts.

I asked a question some time ago which was the road that led me to this point dealing with transparencies in IE.
Well after fooling around with the problem for a good amount of time since then I have decided to return, present my results, and hopefully hear some fresh ideas that will draw this to a conclusion.

So I do have transparencies working in IE thanks to the alpha filter hack. Transparencies obviously work in FF. the problem is bridging the gap between the two and getting my page to look and act the same in both pages.

I attempted the use of javascript as shown in this tutorial:
javascript tutorial
the problem is this though: I swap images when there is a hover. When javascript rewrites the code like this, that no longer happens in IE.
It's also not the most elegant of solutions I think. You get that second of white background as the js runs on each of the pictures. It's also going to apply this same code to all PNGs and I don't want that to happen.

I feel that the solution is CSS, but I can't quite seem to get it to work. Here was another tutorial which I read through:
CSS transparancy

it again works for IE, however in FF I'm getting nothing.
Here is my CSS:
Code:

.transparent {
	width:25;
  	height:29;
	/* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/MagButton.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.transparent[class] {
  background-image:url(images/MagButton.png);
}

with this in my HTML:
Code:

<div class="transparent" />

two problems here. FF does not seem to be processing that [class] style as they said it would. I get nothing on the screen.
the second is that I don't want to be hard coding all of my images like this, the CSS size will explode and become hard to maintain.

Does anybody have any other ways of going about this that have worked for them (CSS is prefered, btu I'm open to anything) I am going to need a lot of hand holding here because I'm new to this, but I'm a patient person if you can be. Thanks.

I've been using Microsoft's filter to use PNGs in IE 7 & 6:

http://msdn2.microsoft.com/en-us/library/ms532969.aspx

But it doesn't seem to allow positioning (left, right, top or bottom) of the image.

Does anyone know of any way to achieve this?

Cheers!