Hi, I'm reasonably new to web design so please bear with me... I am looking to build a website that will hopefully look something like below: At the moment I am focusing on making a div which contains the top of the drop shadow (976 x 8px .png) and adds a 20 px margin to the top of the page. The margin has been added but the shadow won't display. If I comment out the background image, the shadow displays. Here is a link to an uploaded version of the page: mytestingplace .com Do you know why this might be happening? Thanks
Use CSS instead: Google this term and go to first link. I'm not allowed to post links yet. Just registered CSS3 gen com box shadow Post it on each ID you want it to be shown. I'm not sure why it's not working that way, but either way, that's way outdated.
Thanks for the advice ntmedia. The method I was going to use is better for cross-browser and older browser support. It's actually a very simple and straight forward method if it wasn't for something in my webpage (bg image probably) stopping it from working. Unfortunately my web page design doesn't allow for one simple CSS shadow. The header, nav bar left, main content, footer; these all need separate shadows and they need them on specific sides only. Otherwise the shadow from the main content spills onto the navbar for example. From what I have found on google so far, CSS would be a very long-winded and complex way of achieving this. I might try a different background stretching technique. Thanks again.
Well, it's gonna be a boomer doing it, but it's really not that bad. For older IE (that has problem with those shadow), google pie.js javascript edition
Cheers mate. I ended up just doing it using CSS like you recommended. I guess we can't keep designing sites for IE6 forever.