SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS hack for PNG transparency not working!

    Hey,

    I am desperately trying to make a transparent PNG work on this site. I have read the article over at A List Apart on how to do this, but for some reason it fails on my machine (Internet Explorer 6). Can somebody tell me how to fix this?? Thanks, any help is greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For foreground images i would use the pngfix method here.

    If you don't want to use that then you could do something like this which works but is a bit overkill.

    Code:
    #banner {
        float: left;
        width: 390px;
        height: 500px;
        background:url(http://www.modeldock.de/images/jens_braun.jpg) no-repeat center center;
    }
    #banner span{
        float: left;
        width: 390px;
        height: 500px;
        background:url(http://www.modeldock.de/images/frame.png) no-repeat center center;
    }
    #banner img{visibility:hidden}
    IE only code follows:

    Code:
    * html #banner{
    background-image:none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/jens_braun.jpg',sizingMethod='image');
    }
    * html #banner span{
    background-image:none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/frame.png',sizingMethod='image');
    position:relative;
    top:-25px;
    left:-5px;
    }
    * html #badge{
    background-image:none;        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.modeldock.de/images/badge.png',sizingMethod='image');
    }
    * html #badge img{visibility:hidden}

    Then the html would have to be like this:

    Code:
    <!-- // header -->
    <div id="wrapper">
        <div id="content"> <span id="banner"><span><img src="http://www.modeldock.de/images/jens_braun.jpg" /></span></span> <span id="badge"><img src="http://www.modeldock.de/images/badge.png" /></span>
            <div id="text">
    Basically I put the images in the background and used the alpha image filter. The foreground images are hidden but left in place for accessibility etc.

    The pngfix method would be neater but read the article thoroughly as it needs to be done properly. However the above method I've shown is working now in IE and Firefox ok.

  3. #3
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, this is great, Paul. Thanks a lot. I just left my office, so I can't try this out before Monday, but I'll post some feedback soon. Thanks a bunch!!

  4. #4
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,
    I went for the solution that you recommended, and it looks better than before, i.e. the PNGs are displayed correctly. However, when I try to open my page in IE6 it seems to take forever for it to load entirely. It seems like the browser gets stuck in a loop or something. Do you know how to fix this?
    Last edited by Pixelateur; Oct 27, 2007 at 06:52.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I looked earlier at this but I had to go out but now I look again it seems you have changed the design and it seems to be working ok.

    Did you solve the problem?

  6. #6
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Sorry, I should have let you know.... My client said that he didn't really like the scotch tape after all, so we decided to abandon it in favour of a much easier way.

    By the way, I got the transparency effect working in IE, but I used this method. And just when I got it working, my client rang me up...

    But at least I know how to make this stuff work. There's another project in the pipeline, where I might need transparent PNGs again. Thanks again for helping.


Bookmarks

Posting Permissions

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