www.webdeveloper.com
Results 1 to 7 of 7

Thread: IE6 transparent png filter fix for Sprites

  1. #1
    Join Date
    Nov 2010
    Posts
    27

    IE6 transparent png filter fix for Sprites

    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 :

    filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='abc.png',sizingMethod='crop');

    so I need to get the images correctly on IE6

    Thanks
    mjask

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You need to create separate classes for IE6. And you should use the PNG images as a background in certain DIV elements, not straight as IMG elements

    Lets say that you have, in an external CSS file, called css.css, a class abc
    Code:
    .abc{
    width:100px;
    height:100px;
    background:url(abc.png) no-repeat 0 0;
    }
    You should create now a class for IE6, like this:
    Code:
    .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, ie6css.css. Now all you have to do is to load that external file after the normal css file, on using an IE only conditional comment:
    Code:
    <link href="css.css" rel="stylesheet" type="text/css">
    <!--[if lte IE 6]>
    <link href="ie6css.css" rel="stylesheet" type="text/css">
    <![endif]-->
    Now the ie6css.css class background property will overwrite the css.css class background property, but only for IE6

  3. #3
    Join Date
    Nov 2010
    Posts
    27
    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

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  5. #5
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Quote Originally Posted by Kor View Post
    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.
    I don't think Kor knows what a sprite is.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    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.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    Here it is.

    HTML Code:
    <!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>
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles