21 Only 3? Why not 5?

You are of course right. I should really stop and think more…

The way I see it, if you’re already using 2, what’s an extra one gonna change? The snobs will already be choking on their noses and you avoid the extra markup the IE hackerage takes up. I suppose this would balance out with a lot of shadowed images weighing down the code with their uncached <div></div>.

Well, on further reflection; good article, chum.

posted at 05:38 pm on April 23, 2004 by James

22 Lots and lots of Divs

It should be noted that, if you don’t want the “frame” provided by the image border and padding, you can actually pull this off with just one <div>. You’d just set the PNG as background of the image and give it the appropriate padding.

I didn’t do that because, quite frankly, the naked images with shadows don’t look so good.

Just a thought.

posted at 07:31 pm on April 23, 2004 by Sergio

23 What am I missing?

I followed the tutorial but seem unable to get the grey border around the image working in IE6. It wokrs fine in Firefox and if I adjust padding within the class .alpha-shadow img, Firefox responds fine. However IE6 does nothing. Anyone has any idea what went wrong?

posted at 12:50 pm on April 24, 2004 by Matt

24 Padding for "frame"

Matt: Most likely, you don’t have a correct doctype specified. Make sure you’re using a correct doctype for XHTML 1.0 Transitional or up.

If you don’t do this, IE 6 reverts to quirks mode and does what IE5.5 and IE5 do with the padding of images with border (namely — nothing).

posted at 01:00 pm on April 24, 2004 by Sergio

25 an alternate IE PNG fix

I’ve not tried it, but it looks like [url=“http://dean.edwards.name/IE7/”]Dean Edwards’ IE7[/url] server-side compliance patch should make this work fine, without worrying with any javascript.

posted at 02:28 pm on April 24, 2004 by eric

26 woops

Mentioning that HTML is disabled would be sort of handy.

posted at 02:29 pm on April 24, 2004 by eric

27 3divs, but without te IE-hack stuff

Re: sergio: Another possibility is to have an extra hook. Then, you could indeed just make two GIF’s that represent the fuzzy borders and affix them to top-right and bottom-left of your divs. That would work, but you’d end up with three divs around your image instead of two.

I supposed, it looks like this?
http://phoenity.com/tests/fuzzy_shadows.html
I think this is (a bit much) better, though non-semantical, because I don’t quite like that extra ie.css …

posted at 06:46 pm on April 24, 2004 by Lim Chee Aun

28 3divs... niice

Yup, I guess it looks exactly like that =)

Great job.

There are about a million ways to skin this particular cat. I went the way I did in the article because I sort of dig the combination of techniques that lead to the effect. If I could, I’d have done it in under a <div>. Still trying…

posted at 07:37 pm on April 24, 2004 by Sergio

29 Thank you Sergio!

Thank you very much for the tip! It solved my problem and everything is working fine now!

Take Care!

posted at 07:38 pm on April 24, 2004 by Matt

30 Another thing...

By the way: If you use the effect for thumbnails of a gallery (using the images to link to bigger versions), you can enclose the image in the anchor, set the anchor’s display property to display:block; and use it as the middle <div> (thus pulling this off with just one <div> and cheating a bit).

posted at 07:42 pm on April 24, 2004 by Sergio