Box Shadow on 100% width element triggers scrollbars on Firefox?

I have an absolutely positioned element which I’ve set to 100% width with the following css:

.footer {
	background:url(header.gif); 
	height:76px; 
	color:#777; 
	padding:20px 0; 
	position:absolute; 
	left:0; 
	width:100%;
	border-top:1px solid #fff;
	z-index:999;
	box-shadow: 0 -5px 7px #ddd;
	-moz-box-shadow: 0 -5px 7px #ccc;
	}

However, unless I comment out the “box-shadow” effect, FF creates scrollbars!

Is there a workaround for this?

I would try margin:0 -7px or width 99%.

do this instead


.footer {
	background:url(header.gif); 
	height:76px; 
	color:#777; 
	padding:20px 0; 
	position:absolute; 
[B]	left:7px; 
	right:7px; [/B]
	border-top:1px solid #fff;
	z-index:999;
	box-shadow: 0 -5px 7px #ddd;
	-moz-box-shadow: 0 -5px 7px #ccc;
	}

( I got rid of “width:100%” and added left/right instead) this only works because you are using AP.

anyway, hope that helps == : )

BTW
it would probably make more sense to make footer an ID. I mean, how many other footers can there be?

I’ve started to use classes for things like “footer”, as they have less of a sledgehammer effect on the CSS.

Ah yes that is a better solution.

The negative margin would work better if all you want is the shadow on the top otherwise the offset method is good also :).

Firefox 5 doesn’t actually show this bug as box shadow should not be part of the flow.

(As an aside also note that using overflow:hidden to contain floats can end up cutting off the box shadow.)

Thanks for all the suggestions. One thing I have a problem with achieving with box shadow is the overflow on the 0 edges.

For example, I only want the shadow to appear on the top of the container with minimal spillover on the sides and no spillover on the opposite side. However, in practice I always seem to get some shadow spill (as a faint line) on the side opposite the shadow direction.

IE, this css should put a shadow with 10px of blur radius only on the left side of the box, but I still get a faint line on the right side:

box-shadow:-5px 0 10px #ccc;

What am I missing?

Thanks Eric, the scrollbars are gone. Unfortunately it leaves a nasty 7 pixel margin on the right edge (this is a full flex width layout).

Hi Dresden, thanks very much for the help. In this case, your code creates a 7 pixel empty margin gap on both sides of the browser window. See the screenshot above where the negative margin example creates an empty margin gap on the right side.

The only solution I could think of would be to use a negative spread radius which should remove the scrollbar.

I’ve used the -moz-prefix which targets FF3.6 as FF4 uses the proper css property. I was unable to test FF4 but FF5 doesn’t have the bug and will use the proper box shadow.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0
}
.footer {
    background:red url(header.gif);
    height:76px;
    color:#777;
    padding:20px 0;
    position:absolute;
    top:10px;
    left:0;
    width:100%;
    border-top:1px solid #fff;
    z-index:999;
    -webkit-box-shadow: 0 -5px 7px #000;
    -moz-box-shadow: 0 -5px 7px -7px #000;
    box-shadow: 0 -5px 7px #000;
}
</style>
</head>
<body>
<div class="footer"> test </div>
</body>
</html>


Of course that changes the look of the shadow so you are stuck with the lesser of two evils.

I think that the negative margin would need to equal the blur radius or it will still be showing.


    box-shadow:-5px 0 5px  #ccc;


You could probably get a similar effect with this code:


    box-shadow:-5px 0 10px -2px #ccc;

@Paul, you enlightened me on the “negative spread radius” and that was the ticket to defeat the bug in FF < 4

Here’s what I’m using to effect nearly the exact same effect as the other browsers, and without triggering a horizontal scrollbar:

.footer, .header {
-webkit-box-shadow: 0 -5px 7px #ccc;
-moz-box-shadow: 0 -10px 7px -7px #ccc;
box-shadow: 0 -5px 7px #ccc;
}