Box Shadow working once on site, but not again

Question

Here's the CSS I'm using.

.hentry {
    padding: 40px 0;
    max-width: 840px;
    margin: 0 auto;
    background-color: #fff;
}
.hentry:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.hentry:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.widget-area {
    margin: 0 auto;
    max-width: 840px;
    width: 100%;
    background-color: #fff;
    border-top: #cd0a2b solid 5px;
}
.widget-area:before{
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.widget-area:after{
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}


.site-info {
    margin: 0 auto;
    max-width: 840px;
    padding: 30px 0;
    width: 100%;
    border-top: #cd0a2b solid 5px;
    background-color: #fff;
}
.site-info:before {
    box-shadow: -15px 0 15px -15px inset;
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}
.site-info:after {
    box-shadow: 15px 0 15px -15px inset;
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
}

And the HTML

<article id="post-2" class="post-2 page type-page status-publish hentry">/article>

<div class="widget-area masonry" style="position: relative; height: 424px;"></div>

<div class="site-info"></div>

But for whatever reason the box shadow is only working on the widget-area. I've been on this for a few hours and can't spot anything wrong, but equally, can't work out how to make it work.

The box shadow code is originally from this Jfiddle http://jsfiddle.net/Qq5tQ/

Any ideas?

Edit: Solution

Right! I've fixed it. The solution was @Pete's using position: relative;, but it needed a bit more than that. For whatever reason, all of the box-shadow classes needed content: " "; on them, which was fine, except all of my afters were missing top: 0;.

After adding that in, it was simply a little bit of polishing to get my .site-info to work. Again, for reasons I do not fully understand, it about five pixels off the top (probably a padding issue I created earlier) but that was fixed with by altering the top and height, as seen below.

.site-info:before {
box-shadow: -15px 0 15px -15px inset;
height: 106%;
content: " ";
left: -15px;
position: absolute;
top: -5px;
width: 15px;
}

.site-info:after {
box-shadow: 15px 0 15px -15px inset;
height: 106%;
content: " ";
position: absolute;
right: -15px;
top: -5px;
width: 15px;
}

Thanks for all the help. I couldn't have done it without you both.

Try to add `.hentry:before, .hentry:after { content: ""; display: table; } .hentry:after{ clear:both;}` — Morpheus, Nov 05 '13 at 16:48
Tried that. No luck what so ever I'm afraid. Please see my last comment to Pete for what I've been able to make work. — alex, Nov 05 '13 at 16:52

score 1 · Accepted Answer · answered Nov 05 '13 at 16:28

1

you don't have an item called .entry-header this needs to be changed to .hentry and you need to add position:relative to .site-info, .hentry and .widget-area

answered Nov 05 '13 at 16:28

Pete

57,112
28
117
166

`.widget-area` already works and doesn't have `position:relative`. Why? – alex Nov 05 '13 at 16:30
@pappy, you have an inline style of position relative on that div – Pete Nov 05 '13 at 16:32
Here's what I've been able to work out. If I add `content: " ";` to each `box-shadow` class, it works, only the right hand side is pushed down a lot. Like this. http://i.imgur.com/TsvdOlR.png – alex Nov 05 '13 at 16:49
In case anyone comes across this answer, I added the full solution into the main question. Thanks! – alex Nov 05 '13 at 17:07

Box Shadow working once on site, but not again

1 Answers1