Website Drop Shadow Effect Help

[Saint_Michael 3]

Well I am in a need of help, I want to add this cool drop shadow effect to a website I am building, but unfortunately for me I can't seem to get it right. I want to apply this drop shadow effect to this website

default.css
index.html

The first person to effectively apply this drop shadow to this website will get a 50 credit prize

All the files are provided, you have to download the OSWD file to get the images and style effect, there is no rush but if you can get it done right away I be much appreciated.

Edited May 10, 2008 by Saint_Michael (see edit history)

[sonesay 7]

I could use 50 credits . I'm going to give it a shot you want the final html + CSS updated?

[jlhaslip 4]

Which drop-shadow are you looking for? The one on the centre portion of the page?

[Saint_Michael 3]

oops , yeah I want the center shadow, but I still want the original design from the attachments, so basically your transplanting drop shadow from the link to the attachments.

Edited May 10, 2008 by Saint_Michael (see edit history)

[truefusion 3]

In your case, you've made it simple to work with—you have a fixed width for the content. Do this:

Make a DIV element that surrounds everything.

Open up an Image manipulation program.

Make the width of the document slightly wider (maybe 30px wider) than the width of the content ID.

Make a bi-linear gradient that looks good to your liking (make sure the background is transparent on all layers).

Fade the bottom half out to your liking. Export, PNG.

Fill that newly created DIV element with a none-repeating background of that PNG.

Optional: Set a min-height for that new DIV element.

[sonesay 7]

Heres my solution I checked in firefox and safari and it works. IE7 fails lol theres like a huge gap between the drop shadow of the top and middle. Have a look maybe somone can point out what the error is for IE 7.

sm.zip

[Saint_Michael 3]

Thanks sonsay and yeah I was able to figure out why it wouldn't work in IE, took about 20 minutes, but I got it. Interesting enough you just missed one word, and if you take a look at the coding you will see which one word is that.

#wrapper-menu-top {background: url('images/bg02-trans-left.png') repeat-y left top;width: 918px;margin:0pt auto;}#wrapper-menu-top-right {background: url('images/bg02-trans-right.png') repeat-y right top;}#wrapper-content-top {background: url('images/bg02-transf-left.png') no-repeat left top;width: 918px;margin:0pt auto;min-height: 200px;}#wrapper-content-top-right {background: url('images/bg02-transf-right.png') no-repeat right top;min-height: 200px;}

So Yeah, thanks for the big help sonesay, the website doesn't look as flat anymore.

[sonesay 7]

No problem thanks for the credits it was well worth the time spent . I still don't see the error, what was it?

Edited May 10, 2008 by sonesay (see edit history)