I have spent literally hours and hours over this shadow effect, and am now broken! I need your help.

 

Basically I'm looking to add a subtle 8px shadow around all of my content. As my page isn't a simple straight down the centre layout, it's a little fiddly.

 

I'm doing it with images, and I understand that it could potentially be done with CSS shadow effects. But, I've already came this far and would really like to see it through using images (especially since the CSS method doesn't look any easier and has lots of browser compatibility issues).

 

At the moment I have achieved the effect on my header section. I have also gotten close on my #nav_left.

 

Problem1: I have wrapped my #nav_left into a div, this div has a y-repeating png for it's background. You will see how the shadow does wrap nicely at the sides, but continues to wrap round the 8px high png I added at the bottom. Do I need to somehow attach a div to the bottom of the left navigation to hold the bottom shadow? How would I do this?

 

Problem2: I mirrored the way I wrapped the #nav_left, when wrapping the #main_right. For some reason, it has all gone out of place. Just like #nav_left, I was hoping #main_right would simply sit in the centre of a parent div with a shadow background. Do you know how I can correct my layout to achieve this?

 

Many thanks, here is a link to my site:

 

http://mytestingplace.com

 

Oh, and the right div is currently using a red png file as its bg so I can clearly see it's layout. I don't need a shadow for the horizontal navbar.

the CSS method doesn't look any easier and has lots of browser compatibility issues

 

The css method is much easier. Try this http://css3gen.com/box-shadow/

The css method is much easier. Try this http://css3gen.com/box-shadow/

 

Thanks for your reply.

 

The css3 method only works on IE9+. It bugs me knowing that not one windows XP user will see the drop shadow. Am I being too kind to users of older browsers? As a starting developer this is something I'm really struggling with!

 

Would be interested to hear your opinion on this.

We're on the eve of Internet Explorer 10, 9 is well established and XP is an 11 year old OS.

I'd say you're being way to kind to those still running XP with an outdated browser.

 

Graceful degradation is what is called for here.

If you absolutely have to replicate the experience for old versions of IE, try using the proprietary "filter" property in an IE-only stylesheet.

Cheers guys. I agree on the graceful degradation, and I guess it's up to us guys to push it.

 

I've seen this filtering mentioned a couple of times but never looked into it. Will check it out.

 

I changed the site to use the CSS shadow. There are two 3 sided shadows, one with no top for the nav left and main content, then one with no bottom for the header. It's not pixel perfect, but I'll keep tweaking the settings to see if I can get it. For now though it will do.

 

It sure as hell cleaned up my code!

 

http://mytestingplace.com

Rather than using thte keyword "gray" for the box-shadow, use RGBa - you'll get a much better effect with alpha opacity and you can tweak the values a lot easier than using colour keywords. Try:

 

rgba(0,0,0,0.4)

That looks way better. Great!

I wouldn't sweat it that <IE9 users will not see shadows, they are used to seeing ugly already. Personally, I would avoid the MS proprietary filters. They are a real performance killer and the IE audience will neither notice nor miss their absence.

 

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

I wouldn't sweat it that <IE9 users will not see shadows, they are used to seeing ugly already.

 

Never a truer word spoken ha!

Hope this will help you....BOXSHADOW

 

Jerry

 

Dude, the thread is 2 years old.

I think date has not been confirmed on priority before replying.