**MORE CONTENT HERE**
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):
**MORE CONTENT HERE**
A demo of the above can be seen here: http://webtest.doubleswirl.com/3sidebox/index.php
By the way, Chris, thanks for the wonderful site, and all your fantastic information and tutorials!
Thanks, in advance, for any suggestions you may offer.
Thanks for the response.
The reason I need PNG/GIF, is to be able to place this over an image background. The demo page is simply a "proof of concept" to see if I could work out the code, and make it as semantic as possible.
I have updated the demo page http://webtest.doubleswirl.com/3sidebox/index.php, with a background, to better illustrate my point.
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.
Maybe I’ll work up an example this weekend.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".