I wanted the footer on a mobile site I was working on to stick to the bottom of the page. I found the CSS Sticky Footer example by Ryan Fait and implemented it. On every browser I could conceivably test, I found the footer to stick nicely to the bottom.
And, then it happened. The clients complained about the footer throwing itself all over the place. On painfully requesting details, I found out that the problem occurred on only one model of BlackBerry mobile devices: the 8250 model. I pulled out a Windows VM, downloaded and installed the BlackBerry 8250 simulator, and sure enough, I saw the problem.
For a page the height of two BlackBerry screens, the footer sticks to the middle of the first screen, on top of everything else. The footer does not move as you scroll, and if you scroll down to the lower half of the page, the footer is not visible. It stays fixed to the middle of the top screen.
I will post the HTML and CSS to the end of this question. If I could get any pointers or clues as to why this is happening on the 8250 BlackBerry model, and not least, how it could be fixed, I would be very very grateful.
Thank you!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
.page {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 4em;
margin-top: -4em;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<!-- lots of other DIVs here for actual content -->
<div class="push"></div>
</div>
<div id="footer">
<!-- footer content over here -->
</div>
</body>
</html>
I found this jQuery Sticky Footer hack. I am not too sure of whether this is going to be something people would suggest I should go with. I've not tested it yet, though.
Update: This is a small update to say that I toyed with the jQuery Sticky Footer hack linked right above. It didn't work for the BlackBerry device mentioned, either.
After trying a couple of different things, I stumbled into the CSSStickyFooter solution. I implemented it and found it to work well on the Black Berry device in question, along with the rest of everything I have tested it on. I am going to paste the HTML and CSS code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<title>Another CSS Sticky Footer that works on Black Berry</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>Some body content will come here</p>
<p>And over here as well.</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
</html>