0

At http://ryanspahn.com/adsgrader2/index you can see I have a grey footer and in IE, Safari and Firefox the footer sticks to the bottom. But in Chrome it is not sticking to the bottom - which is odd.

I created this sticky footer using the following method found here on stack ...... CSS to make HTML page footer stay at bottom of the page with a minimum height.

I wonder if anyone has seen this before and or has a suggestion to fix this Chrome issue.

Community
  • 1
  • 1
chaser7016
  • 595
  • 2
  • 10
  • 28
  • I've used this method, and it works just fine on Chrome. Code...? – awm Apr 21 '11 at 06:46
  • Suggest that you fix the [validation errors](http://validator.w3.org/check?uri=http%3A%2F%2Fryanspahn.com%2Fadsgrader2%2Findex&charset=%28detect+automatically%29&doctype=Inline&group=0) and try again. – awm Apr 21 '11 at 06:50

1 Answers1

1

I'm not sure about that tutorial but if you want your footer to stay at the bottom you need to use fixed positioning not relative. Fixed means that it will not scroll when the rest of the page scrolls. You can anchor it with the same attributes at absolute positioning using top, bottom, left, right.

Add the following onto your existing css, and change values where necessary.

#footer {
     position: fixed;
     bottom: 0px;
     width: 100%;
}

#foot {
    margin: 0px auto;
}

I also noticed that when you do this you'll have to float the image you have in the footer left.

#right img {
    float: left;
}
William
  • 6,338
  • 4
  • 32
  • 36