Forums

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 :

  <div class="homepage offset-blur"><br />

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 :

  <div class="homepage offset-blur cf"><br />

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.

treehouse : what would you like to learn today?

Forums

[Solved] Firefox Box Shadow Underflow