0

If I remove the clearfix div, above the footer, the text falls into place, as it does on Firefox.

But that breaks other things. I don't understand how that clearfix can be affecting the footer at all though...

My page:

http://www.craftonhills.edu/Current_Students/Counseling/Assessment.aspx

Kristi Simonson
  • 515
  • 1
  • 6
  • 22

2 Answers2

1

It looks like your footer element as these style rules associated with it:

#footer {
    clear: both;
    font-size: 1.4em;
    height: 150px;
    margin-top: -150px;
    position: relative;
}

If you remove the margin-top: -150px rule, it looks like that clears up Chrome.

In the #content style, it looks like you have a padding-bottom: 150px; rule that is pushing everything down quite a bit. Might want to reduce that a bit as well.

If your goal is a Sticky footer, for some reason adding the margin-bottom: -150px; rule to the #container element worked in Firefox, Chrome, and IE for me. However, I think it's a bit higher than 150px.

Tim
  • 749
  • 4
  • 14
  • That almost worked. Except this is supposed to be a sticky footer, dropping the footer to align with the bottom of the page if the content is too short. Removing the 150px references drops it below the bottom of the screen, as you can see here: http://www.craftonhills.edu/Current_Students/Student_Life/Clubs/Badminton_Club.aspx – Kristi Simonson Sep 19 '12 at 21:18
  • That does solve the sticky issue, but breaks the footer again in Chrome, depending on viewing size, for me... – Kristi Simonson Sep 19 '12 at 21:43
0

I ended up adding a .push div below my clearfix div, giving it a height of 180px (the correct height, with padding, rather than 150px). Not semantic, but it seems to fix Chrome.

Kristi Simonson
  • 515
  • 1
  • 6
  • 22