Background alpha PNG woes

Usual IE hack doesn't work in this case

[MatthewHSE]

I've got a round, 16x16 icon as a 24-channel png that I want to use as a background for some links. In Firefox, the only CSS I need is this:

a.icon {
padding-right: 16px;
background: url('myimage.png') center right no-repeat;
}

IE 7 supports alpha transparency, so it does fine with the exact same code. Unfortunately, I still have to design with IE6's ~50% marketshare in mind...

Which of course led me to the old AlphaImageLoader [msdn2.microsoft.com] hack. Basically, you give IE the following filter in your CSS:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png',sizingMethod='crop');

...and assuming the element hasLayout, your transparent PNG will show up just great.

The problem is, it always puts the image at the top left of your element, and I need it to appear at the middle right.

I tried all three sizingMethod values (image, crop and scale) with varying results, but nothing that seemed like it would work.

So referring back to my initial CSS snippet...is there any way to get that result with a transparent PNG in IE 6?

[edited by: MatthewHSE at 5:19 pm (utc) on Jan. 12, 2008]

[SilverLining]

Remove the sizingMethod all-in-all and see if that works. You might want to add a width and height to

a.icon

which forces it to "have layout".

[edited by: SilverLining at 10:21 am (utc) on Jan. 15, 2008]

[SilverLining]

Replace

background: url('myimage.png') center right no-repeat;

with

background: url('myimage.png') 50% 100% no-repeat;

Strange, but works for me.