static css footer at the bottom of windows

ccube921 2 Junior Poster in Training · 2009-01-21T07:02:37+00:00

Hello ayi, I see that you wrote:
position:absolute
well, I tested this and if you change that to position:fixed; it works fine, in my code I made a big green div to demonstrate the scrolling, here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#footer   {
color: #ffffff;
font-size: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: blue;
text-align: center;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 28px
}
#cont
{
background-color:green;
height:1000px;
width: 500px;
}
BODY {
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div id="cont">
</div>
<div id="footer">

<table>

<td>
<select name="select1">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>

<td>
<select name="select2">
<option value="">Font Color</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select name="select3">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select name="select4">
<option value="">Font Size</option>
<option value="x-small">X-Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-Large</option>
<option value="xx-Large">XX-Large</option>
</select>
</td>

<td>
<button>Reset</button>
</td>

</table>

</div>

</body>

</html>

That should work (in Firefox at least).

MidiMagic 579 Nearly a Senior Poster · 2009-01-21T11:08:20+00:00

Actually, it can't be done in a way that works on all browsers, screen resolutions, and window sizes.

The internet is not designed to look like a Windows program. There is no provision for using either the window size or footers. The web is NOT intended to be used in this manner.

What is causing this sudden demand for footers on web pages?

They have never been possible in a browser-independent manner. All of the tricks used to try to get this fail on at least one browser.

ayi_102 0 Light Poster · 2009-01-22T03:01:50+00:00

thank you

i change from absolute to fixed and it works perfect