Question about Box-Shadow

[tordavis]

Box-Shadow is a funny thing. It works on all browsers but for some reason if I use it in my Body element in CSS it won’t put a shadow around the body in IE and Chrome. Works fine in FF though. Also works fine on all browsers on the div’s inside the body like my social column and article list.

Here’s my site: http://www.stfuandplay.com

view it in FF, Chrome and IE and you’ll see what I’m talking about.

Here’s my CSS for the body and the other divs:

body {
margin:0 auto;
width:1024px;
height:auto;
background:white;
box-shadow: 0 0 3px #000;
}

#content-left{
width:680px;
height:auto;
float:left;
margin-left: 7px;
margin-right:5px;
background:white;
box-shadow: 0 0 3px #000;

}

#social-column{
width:325px;
height:auto;
box-shadow: 0 0 3px #000;
position:inherit;
background:white;
float:left;
padding-top: 3px;
padding-left: 3px;
padding-bottom: 3px;
}

[TheDoc]

I would suggest simply creating a wrapper and not giving your body a fixed width like that.

[tordavis]

Please enlighten? What’s wrong with giving the body a fixed width? Is that bad practice?

[Jeager]

It’s funny because I have never even considered putting a width on the body tag. I wonder what kind of repercussions would come out of it… If nothing was wrong with it, would that not be the most semantic way to writing a wrapper?

[Senff]

Technically, it shouldn’t be a problem to give the body a width and use that as the wrapper. Chris and Dave recently mentioned it on their podcast, as well. I’m not sure if it’s a “safe” thing to do however, as in, if it works in all browsers and how far support goes.

I find it a bit of a funky way of doing things to be honest. If you change the background color of the body, then it will be applied to the entire page, not just the 1024-width body, yet the shadow is applied to the 1024-width area.

If you would use the “classic” way, with a wrapper div inside the body, you can’t go wrong. That will also allow you to keep control over everything outside of the wrapper, in case you want to give the full-window page a background later on.

So I wouldn’t say it’s bad practice as such, but I personally prefer doing it with a wrapper div.

[tordavis]

Ok this is very good advice but does anyone have an idea why my box-shadow isn’t working? :)

[joshuanhibbert]

@TheDoc answered your question: use a wrapper div instead of the body element.

[tordavis]

Ok I’ll put this to the test.

Thanks!

[tordavis]

That worked! Turns out I already had a wrapper! DOH!

[Author]

Posts