SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    drop shadow with transparent png issue in IE6 & IE7

    Hello,

    So I'm trying to get this drop shadow thing figured out. I'm using a transparent png. It works perfect except in IE6 and IE7. The png shows through my background image in IE7. And in IE6 the background image sits above the transparent png. If I use a <img> instead of a background image then IE6 is OK - but I want the ability to use a background also. This method is so simple and hack free - I'd like to use it if I can find a way. Do you see a way? Thanks a lot! I know IE6 can't use the transparent png to it's full capacity - I'm ok with that. I'd rather avoid all the hacks.

    Here is the test image in question
    http://www.visibilityinherit.com/pro...adow-test5.php

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're admitting that IE6 doesn't support transparent PNGs but you're hoping for a solution that doesn't have hacks -- which is impossible.

    In order to get IE6 to display transparent PNGs correctly, you have to hack it. And backgrounds sometimes won't work at all. I've found that in some situations they can work, and others they don't. Just Google "ie6 png transparency background" or something similar for more info. Also, a sitepoint forum search might turn up good results, as this has probably been dealt with before.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    No, you got the wrong idea. I simply don't care to make it look like a true transparent image in IE6 - that's different! The IE6 png fix has nothing to do with the png showing in front of the background image as it currently does. So anyone taking a look at this - please take the IE6 png fix out of your mind and simply refer to my original post questions. Thanks!

    Note: png still works in IE6 - it just doesn't show as well without the png fix.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,
    I remember helping someone recently with their IE6 problems, they wound up using the "supersleight-min.js" javascript.

    <!--[if lte IE 6]>
    <script type="text/javascript" src="supersleight-min.js"></script>
    <![endif]-->

    Here is the script location


    Go to this thread, click on their website link (it is a working site) and view the page source. They got it working in IE6.

    So anyone taking a look at this - please take the IE6 png fix out of your mind and simply refer to my original post questions. Thanks!
    Sorry, just now saw your reply!

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks for looking guys. OK... lets do this! I have another version with a png fix added so we can all let go of that idea (I saw Razur you didn't see it). I would still rather use my original if I can find a way (less hacks - actually no hacks). But this version suffers from one of the same problems - the png shows through the background image in IE6 and 7. So we fix this one maybe I fix the other one also. Thanks!

    http://www.visibilityinherit.com/pro...adow-test4.php

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The example you gave in the first post does not work in IE6 because it needs to be "hacked" to work. It cannot work without a hack. Beyond that, I really don't know what you're asking for. I apologize, I'm not trying to be rude, just pointing out the facts.

    Can you possibly explain the problem better? Thanks.

    Louis

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

    If you are just talking abut the z-index layering then IE would need another div in the equation because it doesn't work the same as other browsers.

    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>Untitled Document</title>
    <style type="text/css">
    <!--
    .shadow{     
        width: 150px; 
        height: 214px;
        position:relative;
    }
    .shadow div{
        background: url(http://www.visibilityinherit.com/images/family-photo-alt.jpg) 0 0 no-repeat;
          width: 150px; height: 214px;
          position: relative;
        font-size: 0;z-index:99
    }
    .png {
          position: absolute;
          bottom: -5px;
          right: -5px;
          z-index: -1;
          width: 102&#37;;
          height: 101%;    
    }
    -->
    </style>
    </head>
    <body>
    <div class="shadow">
        <div></div>
        <img class="png" src="http://www.visibilityinherit.com/projects/clear-shadow.png" alt=""> 
    </div>
    </body>
    </html>

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul that did the trick! But I think I prefer this other method I've been working on. It's a little heaver on the code but looks and performs better. Only problem is - I can't seem to get any pngfix for IE6 to work with it. I tried all of them. I tried the JS ones, the .htacces ones, the filter ones. All they all seem to do is make the shadow disappear. So here I am again asking for help. Thanks guys for any input - appreciate it!

    Here is the page in question
    http://www.visibilityinherit.com/pro...adow-test7.php

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

    You can't do this for IE because the big image you used will be scaled really smaller to fit the image and the shadows will disappear.

    The only option is to use small image (about 150x150) and then when it scales it won't look too bad. You can then add the rounded faded parts of the shadow to the end of the actual image itself and just use one image for IE6.

    It's not possible to place the 8px8xpx images because they will scale to fit the div they reside in. You could place them absolutely in an 8x8 div but then you would run into the issue that the scaled borders are a different shade than the end round bits.

    Therefore the only option is as I said above and use one image for IE.

    Here's an example using your images except for a new image I created for IE by adding the end bits to a 150x150 image.

    http://www.pmob.co.uk/temp/ewshadow.htm

    Hope it helps

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Morning Paul,

    Ooeeww! My vacation in two days - going to Palm Springs! Yaaee!

    OK so... I was sitting here starring at your reply for the longest time and finally it donged on me - you and I are talking about to different techniques. While the older one you were helping me out with was good this new one I found and implemented is much better. You'll see in the source that the two are totally different. So should I still use a 150 by 150 image as you mentioned or is there a different way now that I am using a different method? Thnaks Paul and sorry for the confusion!

    New page
    http://www.visibilityinherit.com/pro...adow-test7.php

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

    The last example I gave was based on your last example but it had to be changed slightly to work.

    Let me explain

    In your example you have this code:

    Code:
    .wrap1 {
    background: url(rightcorner.png) right top no-repeat;
    float: left;
    }
    This allows you to place an 8px x 8px ending shadow at the edge of your existing shadow which it does nicely for good browsers.

    However this makes it impossible to accomplish for IE6 using the alpha image loader for the following reason: When you apply the filter to #wrap1 it will scale your 8 x 8 image to fit the div and the image will now be sized at 214px x 150px and stretch over the whole div causing a great big mess.

    If you use the other sizing attribute of "image" then your wrap1 element becomes 8px x 8px and is no good either because its now too small. The last sizing method attribute is "crop" and this would crop the image at the 8px by 8px size but as you can't place the background image it's no good either because its either cropped and missing or hidden somewhere under the other images.

    So to place an 8px by 8px image you would need to use an 8px x 8px div and place it exactly into position. But as already mentioned the longer scalable shadow will have been scaled to fit and the fade effect will be thicker or lighter depending on how much the image is scaled.

    Therefore for the last example I simply gave IE6 a smaller png image combined with the faded corneres remembering that IE will scale this image to fit and doesn't need the extra corners.

    So the last example is the same as yours but I rationalised the divs and made it look more acceptable. I simply removed the background images for IE6 and just used the one 150px x 150px image. (IE5.x gets jpgs for all images and oloks pretty good but with no transparency of course.)

    Hope that explains it

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Alright I think I got it now - just give me a few to wrap my brain around it. Thanks a lot Paul! Any way I can get at that new image you created? My image making skills are still severely lacking. And I can't get it with firefox because it's hidden from firefox.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The images is here:

    http://www.pmob.co.uk/temp/images/ewshadow2.png

    All I did was cut off the bottom right corner of your big image and then attached the two other images to the ends. You might be better off working with your original image to get a better quality than I made.

    You might also want to experiment with the size of the image to see what gives the best performance over a range of sizes.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Alright - thank you Paul - I owe you!

    I've also been working on this method to feed IE6. IE6 uses the same png but then gets feed these rules - load it up if you care to - it looks pretty good also. There is no fuzziness to the shadow - it's sharp - but it looks pretty good. And that keeps everything in the same exact spot. Note: this goes with test7 (wrap1, wrap2, etc).

    * html .wrap1 {
    background: none;
    margin: -4px 0 0 -4px;
    }
    * html .wrap2 {
    background: none;
    font-size: 0;
    }
    * html .wrap3 {
    margin: 0 -4px -4px 0;
    padding: 4px 0 0 4px;
    }

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There is no fuzziness to the shadow - it's sharp - but it looks pretty good.
    Do you mean without using the alpha filter?

    Yes you can do that but it won't be transparent of course

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya with no filter.


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
  •