jackiechan182
New Member
I got a rather weird problem:On one of the sites I'm currently creating I use a sticky footer which works just fine in Firefox, Chrome, Safari and IE 9.It actually also works in IE 8, but only when accessing the site via a link from another page of the same site. When directly accessing the site (or reloading it), the footer isn't displayed at the end of the page, but a little bit above it, overlapping the content there.If I click on an image on that page that opens in a lightbox, the footer somehow moves back to its desired place though.The footer also works perfectly when I view the site in my local environment, the problem occurs only on the production webserver (or any other online space I uploaded it to).Here's the relevant footer code, if you need more, please tell me (unfortunately I can't give you access to the site):HTML:\[code\]<!DOCTYPE html><html> <head> <link href="http://stackoverflow.com/questions/14444317/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="content"> <!-- Content etc goes here --> </div> <div class="push"></div> </div> <div class="footer"> <!-- Footer goes here --> </div> </body> </html>\[/code\]CSS:\[code\]html, body { height: 100%;}div.wrapper { width: 960px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -154px;}div.push { height: 154px;}div.footer { position: relative; width: 960px; height: 154px; margin: 0 auto 0 auto; clear: both; overflow: hidden;}\[/code\]I apprecciate any help,tell me if you need more information or if I missed something.Cheers,Alex