SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent png images appear without the transparent shadow in IE6.

    Hi,

    I'm making the instruction manual for a program and want to use images of pushpins with gradient shadow effects to spruce things up.. The thing is that I just cannot make my png 8 -alpha transparency images - which look exactly as they should in Firefox - to have ANY shadow! Of course, I have been using the right filter, but only the bare png images appear without any shadow, whatever I do. Can you tell what I do wrong?


    In my css I address the size, the positioning and the appearance of each "pin" separately like:
    Code:
    *.pushpin{
        width:90px;
        height: 100px;
        position: absolute;
        z-index:1000;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/pushpins/red_down.png', sizingMethod='scale');
    }
    
    /* For the size*/
    
    
    *.screenshot *.top_left{
        top:60px;
        left:0;
    }
    
    /* To determine a certain position*/
    
    
    /*****************************************************************************
    
    And the double declaration to handle IE6 apart from the normal world..*/
    
    
    
    *.red_down{
        background:transparent url("../images/pushpins/red_down.png") no-repeat scroll !important;
    }
    *.red_down{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./images/pushpins/red_down.png");
    }
    And in my HTML I write divs in the proper places - within relatively posisitioned containers - like:
    <div class="pushpin bottom_right red_down"></div>

    Please, find included one of these "pins".

    I have been using Fireworks MX, because I bought it in a bundle with Dreamweaver.

    I will attach the native png Fireworks file, too.
    Could you tell if this is a css or an image exporting issue?
    Attached Images Attached Images
    Last edited by spikeZ; Aug 16, 2009 at 10:31.

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please enclose your code in, well at least in [ code ] - makes it that much easier.

    And I'm just wondering, is it really still necessary to get everything right for IE6?
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Here you will find the graphic subset of the work-in-progress page for the instruction booklet -without any navigation, javascript, or interactivity, so you can just see that the png images cast the intended semi -transparent shadow.. in Firefox.
    To answer you question about the need to support IE6 at all: I far would have gladly forgotten about IE6 completelly, because it causes at least as much trouble for me as a javascript programmer as it does to css designers and - as it seems - to graphic experts, too.
    The only reason I am forced to support this ****** browser is that the system administrators at large organisations like CIB BANK and the market leader electrical company in Hungary still have this *** installed on all of their colleagues' laptops and on all the office computers!! This is really shocking, believe me, but something I just cannot change. Anyway, there was a similar discussion about IE6 support in one of sitepoint's newsletters recently with a similar conclusion..
    http://www.interangol.hu

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have just read the thread about "Using png in Fireworks" and I learned that with png8 export I can: 1.) make the standard browsers show partial transparency correctly. Great.
    2.) IE6 will blend any semi-transparent pixels into the background color - in my case this is obviously transparent, so what I was actually complaining about - the lack of any shadow- is the best possible outcome I can achieve! Gosh! Had I known about this fact earlier I would have fallen back to using alternate gifs in IE6.
    3.) Why doesn't any discussion of png images start with this one sentence: "You can never have partial transparency in png images with IE6 doesn't matter what filter you try using. The best you can do is substituting png-s with gifs, or use the png8 export format to make the semi-transparent parts fully transparent. In this way you will, at least, avoid having those ugly plain gray halos where the semi-transparent parts should appear."

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I said before, why do people still try to get everything perfect for IE6? How many of your users are still on that out-dated piece of junk?
    Dan G
    Marketing Strategist & Consultant

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is an English educational site with business people as the target audience so it must be a big concern for me how the site looks and works in IE6 if there is still this common wide- spread corporate policy that keeps this obsolete fossile alive. Blame the system admins for their lazyness or carelessness.

  7. #7
    SitePoint Enthusiast queen4's Avatar
    Join Date
    Jul 2009
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, here IE 6 won't support transparent png images, why not just use gif, which is much more compatible, almost to any browers.

    And besides that, gif takes much space than png.
    Last edited by Varelse; Aug 16, 2009 at 00:16. Reason: 2 posts merged

  8. #8
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by queen4 View Post
    Hey, here IE 6 won't support transparent png images (...)

    Not true.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  9. #9
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Varelse View Post

    Not true.
    I've always had issues with IE6 or below with transparent images, i would be interested in finding a way around this.

  10. #10
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    There's no need for any workaround. Save them as the 8-bit PNG and they will work fine. No issues.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing


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
  •