View Full Version : Resolved sticking footer placement

09-15-2011, 12:03 PM
Hello kind people,

I do have got a little page I created because of a game.
I'm having the problem, the footer div slips into the nonfooter body div on my Android phone with Opera Mobile and built-in if the screen orientation is landscape.
The temporary solution is that I set a margin on the bottom that equals the height of the footer. In landscape it looks good, but in portrait it's too long.
Here is the source(contains php): link: http://v.gd/igreh

require_once dirname(__FILE__)."/phpfreechat-1.3/src/phpfreechat.class.php";
$params = array();
$params["title"] = "Hunter talk";
$params["nick"] = "hunter".rand(1,1000);
$params["serverid"] = md5(__FILE__);
$params["max_channels"] = 1;
$params["admins"] = array('Igreh' => '#########');
$params["display_pfc_logo"] = false;
$params["max_msg"] = 5;
$params["skip_proxies"] = array('censor');
$chat = new phpFreeChat( $params );

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Igreh's place</title>
<style type="text/css">
.rightborder {
border-right: 1px solid #000000;

.leftborder {
border-left: 1px dashed #000000;

html, body {
margin-bottom: 0;
#non-footer {
padding-bottom: 420px;
* html #non-footer {
#footer {
<script type="text/javascript">
function understood() {
document.getElementById("board").innerHTML = '\n<iframe frameborder="0" scrolling="no" src="../ideabox/index.php" style="width:100%; height:100%;"> Error: Embedded data could not be displayed. <a href="../ideabox/">CLICK HERE</a> to open the forum.</iframe>';
document.getElementById("span").innerHTML = '<span style="cursor: pointer; color: blue;" onClick="javascript:understood();"><u>Refresh board</u></span>';
<div id="non-footer">
<center><table border=0 cellspacing=0 cellpadding=0><tr><td><img src="logo.png" width="96" height="156"></td><td valign=middle><strong><font size=20 style="text-shadow: 0.15em 0.15em 0.3em #333; padding: 0 20px;">Igreh's place</font></strong></td><td><img src="logo.png" width="96" height="156"></td></tr></table></center><br><hr><br>
<table border=0 style="width: 100%; height: 100%;"><tr>
<td rowspan="2"><?php $chat->printChat(); ?></td>
<td class="rightborder" rowspan="2"></td><td rowspan="2" class="leftborder"></td>
<td align="center" style="text-shadow: 0.1em 0.1em 0.1em #FFF; width: 450px;">View bulletin board<br><div id="span"></div><hr></td></tr>
<td id="board" align="center" valign="middle" style="text-shadow: 0.1em 0.1em 0.1em #FFF;">Here you can leave messages for me or everyone else.<br>Helpful infos can posted as well and are welcome =)<br>
Please do not use bad language or do not hurt anyone's feelings<br><br>But be careful!<br>Maybe there is some fool breaking such simple rules<br><br>
<span style="cursor: pointer; text-decoration: underline;" onClick="javascript:understood();">Understood!</span>
<div id="footer" style="background-image:url('back.png'); background-repeat:no-repeat; width: 501px; height: 420px;"></div>

Without margin-bottom: 420px

With margin-bottom: 420px

09-16-2011, 12:25 AM
I'm soooo happy I found this site: http://www.cssstickyfooter.com/