Grow your CSS skills. Land your dream job.

Firefox Box Shadow Underflow

  • MBM
    # November 18, 2012 at 1:20 pm

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

    # November 18, 2012 at 1:53 pm

    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
    # November 18, 2012 at 3:56 pm

    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?

    # November 18, 2012 at 4:58 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".