2

I am having a great deal of difficulty with getting rid of the white space at the bottom when I apply a CSS3 gradient and the content has insufficient height for a scrollbar.

Such as here: http://womancareolympia.webs.com/

I have tried playing with setting both html and body heights to 100% or auto. I am able to make the gradient go to the bottom this way, but then when content requires a scrollbar, the content flows past the gradient.

Thanks for the help!

Theraot
  • 18,248
  • 4
  • 45
  • 72
Jedediah Shumaker
  • 419
  • 1
  • 5
  • 7

1 Answers1

6
  • Add min-height: 100% to body.
  • Remove all instances of padding-top from body (or otherwise set it to 0).
  • Set top: 129px on #fw-container.
  • Set margin-bottom: 110px on #fw-container.
  • Add overflow: hidden to #fw-foottext.

(tested in Chrome+Firefox only)

I do think you should redesign your CSS to not use stuff like top: 100px and margin-top: -50px all over the place. There's just no reason for it.

thirtydot
  • 210,355
  • 44
  • 377
  • 337
  • Fixed! Thank you so much, I have had this problem everywhere! – Jedediah Shumaker Jun 20 '11 at 18:43
  • Should I use padding instead of margin or top/left? I am being forced to used a template and some builder utility and the only thing I can do is ADD my own CSS. I can't edit the pre-existing CSS or HTML. – Jedediah Shumaker Jun 21 '11 at 13:56
  • Well in that case, maybe it's not such a bad solution after all. I can imagine not being able to change around the HTML or edit the existing CSS would be very crippling. What you have works fine, it's just a little inelegant. – thirtydot Jun 21 '11 at 14:16