Positioning a DIV at the bottom of the window (compatible IE and Opera) - how?

J

José Joye

Hello (it's me again ;-) )

I'm still fighting with positioning a DIV element at the bottom of my
window.
I'm trying to be cross-browser compatible (at least with their newest
versions).

With my current script this works (more or less) with IE, Netscape and
Mozilla(Linux). However, it does not work with Opera.
With Opera, if I have the following behaviour:
- My DIV element is truncated (in the height)
- if the Horizontal scrollbar is active. The page will scroll up even if
we reach the end of the document.


Any hints?
José


<html>

<head>
<script>
<!--
function f_resize_bottom()
{

// Get the height of the visible portion of the screen
d=document;
var winHeight;
var scrollTop = 0;
if (typeof window.innerWidth!='undefined') {
winHeight = window.innerHeight;
scrollTop = d.body.scrollTop
} else {
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0) {
winHeight = d.documentElement.clientHeight
scrollTop = d.body.scrollTop
} else {
if (d.body &&
typeof d.body.clientWidth!='undefined') {
winHeight = d.body.clientHeight
scrollTop = d.body.scrollTop
}
}
}

// adjust position to place the banner at bottom of screen
var element;
if (document.getElementById) {
element = document.getElementById('layer_bottom');
if (element && element.style) {
var topPos = parseInt(scrollTop) + parseInt(winHeight) -
parseInt(element.style.height);
element.style.top = topPos;
}
}
}
//-->
</script >
</head>

<body onresize=f_resize_bottom() onscroll=f_resize_bottom()
onload=f_resize_bottom()>
<div style="overflow:hidden; position:absolute; width:100%; height: 43px;
z-index: 1000; left: 0px; top: 200px" id="layer_bottom" name="layer_bottom">
<table border="0" cellpadding="0" cellspacing="0" style="margin-top: 8px"
background="../images/fond_bandeau_bleu.gif">
<tr height="35px">
<td width="150" nowrap>
<p class="CRight">© 2004 All rights reserved<br>
My Company</td>
<td width="620"><img border="0" src="../images/bandeau_bleu.gif"
height="35" width="620"></td>
<td width="100%"></td>
</tr>
</table>
</div>
<p>hello</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4
</p>
</body>
 
T

The wee free man

You can try using an expression, but they only work from IE 5.0 on.
And it don't work in netscape...

<div
style="position:absolute;top:expression(document.body.clientHeight-20)">TEST
LAYER</div>

You can find some info on msdn
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/recalc.asp

You can also catch the onresize event sorta like you did. This script works
fine for me, depending on what exactly you want it to do.

<script language="javascript">

function getBrowser()
{
if (document.layers) return "N4";//we're dealing with netscape 4
if (!document.all && document.getElementById) return "N6";//netscape 6
if (document.all) return "IE";//internet explorer
}

function moveLayer()
{
if (getBrowser=="N4")
{document.testLayer.style.top = document.body.clientHeight - 20}
else if (getBrowser == "N6")
{document.getElementById("testLayer").style.top =
document.body.clientHeight - 20}
else
{document.all.testLayer.style.top = document.body.clientHeight - 20}
}

window.onresize = moveLayer;

</script>

HTH
Vince
 
J

José Joye

Hello,

I tried your solution. However, I'm still having the problem of the
scrollbar (also with IE in this case).
Below is the adapted solution.
Did I made a mistake?

Thanks,
José

<html>

<head>
<title>New Page 2</title>
<link rel="stylesheet" type="text/css" href="../styles/btec_css.css">
<script language="javascript">
<!--

function getBrowser()
{
if (document.layers) return "N4";//we're dealing with netscape 4
if (!document.all && document.getElementById) return "N6";//netscape 6
if (document.all) return "IE";//internet explorer
}

function moveLayer()
{
var d = document;
if (getBrowser=="N4")
{d.layer_bottom.style.top = d.body.clientHeight - 43}
else if (getBrowser == "N6")
{d.getElementById("layer_bottom").style.top = d.body.clientHeight - 43}
else
{d.all.layer_bottom.style.top = d.body.clientHeight - 43}
}

window.onresize = moveLayer;
window.onload = moveLayer;
window.onscroll = moveLayer;
//-->
</script >
</head>

<body>
<div style="overflow:hidden; position:absolute; width:100%; height: 43px;
z-index: 1000; left: 0px; top: 200px" id="layer_bottom" name="layer_bottom">
<table border="0" cellpadding="0" cellspacing="0" style="margin-top: 8px"
background="../images/fond_bandeau_bleu.gif">
<tr height="35px">
<td width="150" nowrap>
<p class="CRight">© 2004 All rights reserved<br>
my company</td>
<td width="620"><img border="0" src="../images/bandeau_bleu.gif"
height="35" width="620"></td>
<td width="100%"></td>
</tr>
</table>
</div>
<p>hello</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4
</p>
</body>
 
A

Aidas Bendoraitis aka Archatas

Try this:
<div style="position:absolute;bottom:0; width:100%">TEST LAYER</div>

----
Good luck!
Aidas Bendoraitis aka Archatas
 
J

José Joye

Hi,

This sounds to work ok as long as you do not have any scrollbar. With IE if
you have an horizontal scrollbar, the DIV section will scroll up...

José
 
A

Aidas Bendoraitis aka Archatas

What if you put all your content exept that footer into a div which width
and height would be 100% and overflow:auto?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pages in Inline frames 1
Frontpage 2000, browser trouble 5
How to access property of a LAYER within Jscript? 4
Web Site Code Anomally? 1
Adsense breaks Frontpage 6
How can i center my page? 1
looks different in firefox then explorer 1
CSS Problems 9

Top