Firefox Box Shadow Underflow

[MBM]

I have a box shadow effect on a container. The shadow displays correctly in chrome but in Firefox and IE9 the shadow doesn’t clear the footer. I’ve tried playing around with the values in the container, used em instead of px but I still can’t get the shadow to allow correctly in all browsers.

http://express-minibus.co.uk/home.html

HTML :

CSS :

.offset-blur
{-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

/*container styling*/
div.homepage {
background: #333333;
margin:0 auto 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
width:1000px;
height:1016px;
}

[TheDoc]

That’s because you’re not clearing your floats. Instead you’re trying to fix it by giving a fixed height to the container, which is a no-no.

Add the stuff from this page to your CSS file: http://nicolasgallagher.com/micro-clearfix-hack/

Then add a class of `cf` to your `.homepage` container and remove the fixed height you’ve set on it in your CSS file. That should do it!

[MBM]

Absolutely bloody awesome! Thank you so much. This has been bugging me for months!

I’ve added the css from that page to my stylesheet. Then :

Without going into too much detail why is this an issue with browsers other than chrome?

[TheDoc]

It was looking fine in Chrome because each browser is going to render line-height and fonts just a little bit differently. So Firefox was adding too much height to the line-height causing your container to be too short.

[Author]

Posts