CODEWITHSUNDEEP
css
alexhoug
alexhoug

Reputation: 305

Box shadow not showing on the top or bottom

I am developing a site and I am running into an issue towards the bottom with the box-shadows on the three different sections. I want the border to show up around all three, but it only shows on the left and right.

Here is the HTML for that section:

<div class="three-cols-row">

<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section01.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section02.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section03.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
</div>
<div class="clearboth"></div>

Here is the CSS for that section:

.three-cols-col{ margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
.three-cols-row { margin:0 auto; width:960px; overflow:hidden; }
.three-cols-row .three-cols-row { margin:0 -16px 0 -16px; width:auto; display:inline-block; }
.three-cols { width:248px; padding: 15px; background: #fff; -moz-box-shadow: 0 0 3px #d4d4d4;-webkit-box-shadow: 0 0 3px #d4d4d4; box-shadow: 0 0 3px #d4d4d4; }

Upvotes: 15

Views: 22886

Answers (4)

Adham Amiin
Adham Amiin

Reputation: 819

position: relative;
z-index: 2;

Upvotes: -2

Rubens Mariuzzo
Rubens Mariuzzo

Reputation: 29241

You have two choices:

  1. Remove the overflow: hidden from all the parents node, because this is clipping your shadow. In your case, remove it from the following selectors: .row, .column and .three-cols.

  2. You can just add some vertical margin to your: .three-cols-col. Instead of: margin: 0 16px 0 16px; you can just put: margin: 16px 16px 16px 16px;.

Both choices were tested on Google Chrome.

Upvotes: 26

isxaker
isxaker

Reputation: 9456

The following statement has decided a similar problem:

position: relative;

Upvotes: 11

KatieK
KatieK

Reputation: 13853

The parent element of your 3 boxes (.three-cols-row) doesn't have enough space to show the text-shadow which exists on the top and bottom of its children. Try adding some padding:

.three-cols-row { padding-top: 10px; padding-bottom: 10px; }

Example JS Fiddle: http://jsfiddle.net/KatieK/zZhxr/1/

Upvotes: 2

Related Questions