First let me say I've asked Google in a number of different ways, and I've read a lot of CSS drop shadow tutorials, before asking here. Trouble is I think I know less after all the homework than before I started.

I'm looking for high quality shadows, and simple coding. One of the best things about moving from tables to divs and css for layout was that my code is a lot more readable, easier to maintain. I'd really like to keep that going. Unfortunately a lot of the tutorials I've read demand a lot of divs, one of them used six divs for all the graphics that are positioned around your image.

The funny thing is this is what brought me here in the first place. I've been using transparent png files to create the effect, but it doesn't look great, it doesn't work in IE 6, and I think I'd be doing a lot better in Google Images if the jpeg I was trying to display wasn't coded as a background image.

Another twist is that I have 8x10 and 8x12 formatted images, in landscape and portrait orientation. I've been using four different files to accomplish this, all of them looking like:



There's got to be a better way, one that doesn't sacrifice simple coding?

Bottom line is there is no 'simple coding' to make drop shadows work in all browsers. There are many methods, PNG is one of them but is hell to make work with IE 6.

Have you seen this one ? http://www.webtoolkit.info/css-drop-shadow.html
If you Googled, I'm sure you found that one, and these:
http://www.alistapart.com/articles/onionskin/
http://www.positioniseverything.net/...opshadows.html

I wish it was simple.. with IE6 still in the mix, it's not

I had seen the first two, but not the last. I had more or less skipped over them because they both seem to have div-itis. I'm hoping it's okay to copy the sample code here:

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow" />
</div>
</div>
</div>That's a lot to display one image. I can do this on my individual photo pages, but it seems a bit excessive for galleries with lots of thumbnails.

On the other hand, it sounds like I wasn't only finding nested div solutions because I was trying the wrong search words. If they're all complicated because that's the only way it can be done, I guess it's time to shut up and accept it...

That div-itis is, unfortunately, typical now to get the drop shadows to work in IE6. If that browser would just DIE it would make our lives so much easier !

Yeah, if it wasn't for IE 6 my life would be so much easier. I'm still shocked when I email someone the URL to a new page with a photo I just shot, and they tell me it's blank. I haven't been able to get pngfix.js to work.

Can I talk you into looking at this page? I'm not sure what I'm doing wrong ... I renamed the classes from "wrap1" to "shadow1" and so on, to make a little more sense, and it's not working. I grabbed the sample images from the A List Apart tutorial, which seem to fade to white ( I need them to fade to transparent, so it looks like that will be a Photoshop fix? ), but what's really confusing me is that there are gaps with no images at all where there should be shadow?

http://forrestcroce.com/Photos/CarCa...tarTrails.html

The png fix requires 'hasLayout' on the element, that means you have to give it a width or height, and you have neither, not on the <img> (which you should do anyway), and not in the style rules. See if that will solve the problem.