Box shadow on two sides only!

HTML & CSS
1

Hey everyone, how’s it going?

I’ve got a question about box shadows and CSS3.

Here’s the page: http://omkara.x-gr.net/

I applied a box shadow the .container on other pages, and it looks fine. Example here: http://omkara.x-gr.net/services/

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.

K

2

Welcome to Sitepoint, msKashmoney.

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:

.container{box-shadow:…}

I hope this helps you trouble shoot this issue.

3

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.

4

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 a lot!

5

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.

Thanks to both of you for your help!

6

Great, glad you got it sorted. :slight_smile:

Off Topic:

And to be honest, I don’t know how you resisted putting a Home button on that site and calling is OM. :lol: