0

I am using this to fix PNG transparency on background images in IE6

ul li a
{
    background-image: url('/NewSite/Content/Images/Sprite.png');
    background-repeat: no-repeat;
    background-position: 0 -48px;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/NewSite/Content/Images/Sprite.png, sizingMethod='crop');
}

This works great, however I have run into a problem when trying to implement this with a sprite. The fix ignores the positioning and renders as if the position was top right.

Is there a way to force background position or a better way to do this. I would prefer to not use JavaScript or change to gifs.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Dustin Laine
  • 37,935
  • 10
  • 86
  • 125

1 Answers1

2

AFAIK the only way to do what you want is with IEPNGFix
You will have to use JavaScript, but you can warp it under conditional comments, like i do.

<!--[if lt IE 7]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" />
    <script type="text/javascript" src="js/iepngfix_tilebg.js"></script>
<![endif]-->

Inside ie6.css

ul li a { behavior: url(iepngfix.htc); }
Shuriken
  • 703
  • 5
  • 9
  • This is my accepted answer, but I had to be able to execute without JavaScript. I ended up just dropping the sprite and using my method with individual images. However, it worked great so that's for the tip. – Dustin Laine Mar 14 '10 at 17:57