drop shadow with transparent png issue in IE6 & IE7

**PicnicTutorials** · Jul 28, 2008, 18:59

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

**Louis Lazaris** · Jul 28, 2008, 20:53

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.

**PicnicTutorials** · Jul 28, 2008, 21:00

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.

**Rayzur** · Jul 28, 2008, 21:14

Hi Eric,
I remember helping someone recently with their IE6 problems, they wound up using the "supersleight-min.js" javascript.



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!

**PicnicTutorials** · Jul 29, 2008, 04:03

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

**Louis Lazaris** · Jul 29, 2008, 13:02

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

**Paul O'B** · Jul 29, 2008, 13:21

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>

**PicnicTutorials** · Jul 30, 2008, 04:00

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

**Paul O'B** · Jul 30, 2008, 13:04

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

**PicnicTutorials** · Jul 31, 2008, 03:27

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

**Paul O'B** · Jul 31, 2008, 03:55

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

**PicnicTutorials** · Jul 31, 2008, 04:22

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.

**Paul O'B** · Jul 31, 2008, 04:56

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.

**PicnicTutorials** · Jul 31, 2008, 05:04

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;
}

**Paul O'B** · Jul 31, 2008, 05:51

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

**PicnicTutorials** · Jul 31, 2008, 05:55

Ya with no filter.

The SitePoint Forums have moved.

User Tag List

Thread: drop shadow with transparent png issue in IE6 & IE7

Thread Tools

Display

drop shadow with transparent png issue in IE6 & IE7

Bookmarks

Bookmarks

Posting Permissions