/    Sign up×
Community /Pin to ProfileBookmark

IE6 transparent png filter fix for Sprites

Copy linkTweet thisAlerts:
Jan 04.2011

Hi

I am looking for the solution to retrieve image from the sprite which is transparent png and provide the IE6 filter fix.

Meaning I am trying to display an image from the sprite through the background-position property but I am not able to get how to apply filter on it for IE6 . For a seperate image I apply filter like this :

filter:progid?XImageTransform.Microsoft.AlphaImageLoader(src=’abc.png’,sizingMethod=’crop’);

so I need to get the images correctly on IE6

Thanks
mjask

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJan 04.2011 — You need to create separate classes for IE6. And you should use the PNG images [I]as a background in certain DIV elements[/I], not straight as IMG elements

Lets say that you have, in an external CSS file, called [B]css.css[/B], a class [B]abc[/B]
<i>
</i>.abc{
width:100px;
height:100px;
background:url(abc.png) no-repeat 0 0;
}

You should create now a class for IE6, like this:
<i>
</i>.abc{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='abc.png');
background:none;
}

Place that class in a separate external CSS file, called, say, [B]ie6css.css[/B]. Now all you have to do is to load that external file [I]after[/I] the normal css file, on using an IE only[I] conditional comment[/I]:
<i>
</i>&lt;link href="css.css" rel="stylesheet" type="text/css"&gt;
&lt;!--[if lte IE 6]&gt;
&lt;link href="ie6css.css" rel="stylesheet" type="text/css"&gt;
&lt;![endif]--&gt;


Now the ie6css.css class background property will overwrite the css.css class background property, but only for IE6
Copy linkTweet thisAlerts:
@mjaskauthorJan 04.2011 — this is for a seprate image which works fine but my prblem is I have a sprite that includes a lot of images so I have to retrieve the image by providing the background-position and then applying the filter to it.

when I apply position and apply filter on the sprite it doesnot work.

I saw on Bing home page they have Bing logo transparent from a sprite which is displaying correctly on IE 6 . but I am not able to get how to do that.

Thanks for your help.

mjask
Copy linkTweet thisAlerts:
@KorJan 04.2011 — You should think everything in the HTML/CSS/JavaScript language. You can not bent a language to suit to a framework. If you can not do that in Sprite, you should code everything by yourself. There is no middle way.
Copy linkTweet thisAlerts:
@Jeff_MottJan 04.2011 — You should think everything in the HTML/CSS/JavaScript language. You can not bent a language to suit to a framework. If you can not do that in Sprite, you should code everything by yourself. There is no middle way.[/QUOTE]

I don't think Kor knows what a sprite is. :p
Copy linkTweet thisAlerts:
@Jeff_MottJan 04.2011 — mjask, the quick answer is that they seemed to use a combination of negative margins and overflow hidden to simulate background position.

It's actually a very clever trick. I'm going to explore it a bit, boil it down to only the necessary parts, and I'll post back with a demo.
Copy linkTweet thisAlerts:
@Jeff_MottJan 04.2011 — Here it is.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body {
/* A gradient so we can see the transparency in action */
background: url("http://www.bing.com/fd/s/a/h1.png") repeat-x 0 -122px;
}

#logo {
/* Standard sprite stuff */
width: 125px;
height: 46px;
background: url("http://www.bing.com/fd/s/a/h1.png") 0 -30px;
text-indent: -2000px;

/* Standard IE6 stuff */
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.bing.com/fd/s/a/h1.png", sizingMethod="crop");

/* The new trick */
_height: 76px; /* the original height (46px) plus the top offset (30px) */
_margin-top: -30px; /* the top offset */

/* In most cases, this may be all you need.
* But if this box is positioned... */

position: relative;

/* Now parts of the sprite you don't want will shine through.
* To fix these cases, use the next ruleset for the container. */
}

#container {
_position: relative;
_height: 46px; /* the original height */
_overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
Bing
</div>
</div>
</body>
</html>
[/code]
×

Success!

Help @mjask spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...