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

**Scott Blanchard** · Jun 27, 2011 16:26

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

Code:

.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?

**PicnicTutorials** · Jun 27, 2011 17:11

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

**dresden_phoenix** · Jun 27, 2011 19:21

do this instead

Code:

.footer {
	background:url(header.gif); 
	height:76px; 
	color:#777; 
	padding:20px 0; 
	position:absolute; 
	left:7px; 
	right:7px; 
	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?

**ralph.m** · Jun 27, 2011 19:33

Originally Posted by dresden_phoenix

it would probably make more sense to make footer an ID.

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

**PicnicTutorials** · Jun 27, 2011 19:41

Originally Posted by dresden_phoenix

do this instead

Code:

.footer {
	background:url(header.gif); 
	height:76px; 
	color:#777; 
	padding:20px 0; 
	position:absolute; 
	left:7px; 
	right:7px; 
	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?

Ah yes that is a better solution.

**Paul O'B** · Jun 28, 2011 02:05

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.)

**Scott Blanchard** · Jul 8, 2011 12:20

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?

**Scott Blanchard** · Jul 8, 2011 13:04

Originally Posted by EricWatson

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

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).

**Scott Blanchard** · Jul 8, 2011 13:30

Originally Posted by dresden_phoenix

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

anyway, hope that helps == : )

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.

**Paul O'B** · Jul 9, 2011 04:19

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.

Code:

<!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.

**Paul O'B** · Jul 9, 2011 04:21

Originally Posted by Scott Blanchard

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?

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

Code:

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

You could probably get a similar effect with this code:

Code:

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

**Scott Blanchard** · Jul 9, 2011 08:18

@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;
}

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions