Question

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.

Was it helpful?

Solution

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); }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top