But on the front page things go wrong because the .container CSS get’s applied to all the sections, creating top and bottom shadows.
I’ve fooled around with this for over an hour with no luck. So here I am asking for help from some people who know CSS3 much better than I.
All I want is for that front page to have a shadow all around the container. Is this possible? I can’t fool much with the template, it’s in Wordpress. I appreciate any advice with MUCH thanks.
first I like to point out that your CSS3 isnt very “older” CSS3 browser friendly… .you may want t go back an add -webkit and -moz version of your rules for increased support of older browsers.
The box shadow property IS NOT inherited. Which makes me wonder if you declared it in a rule that also affected your sections. a good way to test this is to go back and DELETE the box-shadow declaration where you used it and declare it in ITS OWN separate rule:
Because you have box-shadow on each .container div, you get the effect you are seeing on the home page. You’d be better off to rethink your layout, and use a single .container div on the home page and within that have those modules with a different class name.
Thanks so much for your reply. I can’t declare the box shadow in .container because then it affects the other elements (header, footer, etc.) placing a wierd looking shadow around them.
I should mention that this is a special responsive template I bought for Wordpress and am still learning about how it works.
With regards to older browser compatibility, that is stellar advice and I’ve implemented the suggested declarations.
Thanks, that’s exactly what I did. I made a single container div, added the desired declarations and removed others that were making the extra shadows.