...

View Full Version : Resolved sticking footer placement



Adolf1994
09-15-2011, 11:03 AM
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

<?php
@date_default_timezone_set('Europe/Budapest');
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">
<head>
<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 {
height:100%;
background-color:#DEDFD1;
margin-bottom: 0;
}
#non-footer {
min-height:100%;
padding-bottom: 420px;
}
* html #non-footer {
height:100%;
}
#footer {
height:420px;
margin-top:-420px;
}
</style>
<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>';
}
</script>
</head>
<body>
<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>
<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>
</td>
</tr></table></div>
<div id="footer" style="background-image:url('back.png'); background-repeat:no-repeat; width: 501px; height: 420px;"></div>
</body>
</html>

Without margin-bottom: 420px
http://adolf94.x10.mx/Igreh/snap20110915_122315.png
http://adolf94.x10.mx/Igreh/snap20110915_122431.png

With margin-bottom: 420px
http://adolf94.x10.mx/Igreh/snap20110915_122642.png
http://adolf94.x10.mx/Igreh/snap20110915_122729.png

Adolf1994
09-15-2011, 11:25 PM
I'm soooo happy I found this site: http://www.cssstickyfooter.com/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum