Box shadow question

HTML & CSS
1

I’m trying to get a shadow around my main content using this code:


.shadow {
 -moz-box-shadow: 0px 0px 20px #2c2c2c;
 -webkit-box-shadow: 0px 0px 20px #2c2c2c;
 box-shadow: 0px 0px 20px #2c2c2c;
 /* For IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=0, Color='#2c2c2c')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=0, Color='#2c2c2c');
}

Which works like a charm when I wrap the shadow div around all main content including the footer like this:

But what I want is for the shadow to wrap around only the main content,
excluding the footer. When I end the shadow div after the right column(before the footer), the whole effect disappears:



<div id="wrapper">
<div class="shadow">
<div id="header"></div>
<div id="leftcolumn"></div>
<div id="content"> </div>
<div id="rightcolumn"> </div>
</div>  <!-- End Shadowbox -->
<div id="footer"></div>
 </div> <!-- End Wrapper -->

What am I doing wrong? Any ideas how to fix this?

Thanks!

2

Hi,

If you move the shadow closing div before the footer then the floats are no longer cleared within .shadow and the height collapses to zero hence no shadow.

Clear the floats and the shadow will appear.


.shadow{
 overflow:hidden;
 zoom:1.0;
}

What’s this rule doing exactly?


 *|* {
margin:0pt;
padding:0pt;
}

Looks like some css3 namespace [URL=“http://www.w3.org/TR/CSS21/grammar.html”]alternative rule.

You already have *{margin:0;padding:0} in place anyway.

3

Hey Paul,

It worked perfectly! Thank you so much, I kept going around in circles.

What is the zoom:1.0; for?

This code is something that Weebly.com added in the process of publishing the site, it’s not from my original code. They also added in the last few lines of code:


 *|* {
margin:0pt;
padding:0pt;
}

Thanks again! :smiley:

4

That’s for IE6/7 to induce haslayout on the element so that it behaves (see faq on haslayout). It’s not valid css but will do no harm and safer than the alternatives.

5

Ok - I’ll check out “haslayout” now. Thanks for the info!