I am trying to come up with the most semantic way to create an expandable box, with a semi-transparent background image (for the shadow around the box). I came up with the following, which works in all the major browsers, (PNG backgrounds had to be replaced with GIFs for IE6):
The dropshadow is subtle, so you really should be able to do it with jpgs anyway.
Here’s the thing; it can be done with pngs, and there is a java script that will make pngs display properly in IE6 – but you can’t make that hack work with bg images.
Try this: cut your jpgs right to the edge of the shadow and try it out, see how it looks. You might be surprised how much you’re over thinking this. If you still can’t get the result you’re looking for, post your raw PSD file on your server and I’ll give you a hand w/ it.
Hello, and once again, thank you for your reply and offer of help.
However, I think you are missing the point. This is simply a proof-of-concept, to develop the best, most semantic and compatible technique to add a clean shadow/glow/etc to an expandable box. Just because the shadow on the demo page is subtle does not mean that it will always be that way. I am only using this is a test to develop the technique, as cleanly as possible, so that when I want/need to add it on a client’s site, I don’t have to develop the technique while on a time schedule.
My concern is not whether to use JPEGs or PNGs, as I already know I will be using PNGs. The initial and follow-up questions are simply whether there is a more semantic way to code the page (whether XHTML or CSS), that would still provide the same effect.
If it will make my intentions more clear, I’d be happy to add a huge glow/shadow to the demo page, to better illustrate the point. Otherwise, I hope you will take this for what it is, which is, again, a request for comments on the code/technique, not the actual demo page.
Again, while I sincerely appreciate your response and your attempts to help, it seems as though you are not understanding my request.
The short answer is, yes, it is possible to create an expanding box using pngs.