...
PDA

Fixed Footer in Firefox?

angst
09-20-2006, 04:07 PM
Hello,
I've found this script:


<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
background:#C0C0C0;
text-align:center;
font-family:verdana;
font-size:10px;
padding:5px;
font-weight:bold;
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="content">

content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />content<br /><br />
</div>
<div id="footer">My Footer</div>


this is for a fixed footer, it's currectly in IE, but not at all in firefox, was hoping that someone here might know how to fix this?

thanks in advance for your time!
Desdinova
09-20-2006, 04:37 PM
you changed <length> to something like 50px?
if not, try that :)

and I suggest you delete the doctype line,
and swap it for something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

it may kill the IE-version, but I suggest you stick to standards and use a valid and complete doctype. Design on firefox, not on IE. Often it's easier to work with IE because it doesn't follow all the standards, but renders more 'naturally'. Firefox (and mozilla/netscape/opera) render far more by standards, presenting (pretty much) the same output between these browsers. IE always ****s up though. always IE, not the other way around. :)
angst
09-20-2006, 04:46 PM
yah, i just tried that, it didn't seem to make any difference in either IE or Firefox.

thanks again for your time!
-Ken
_Aerospace_Eng_
09-20-2006, 06:32 PM
Try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fixed footer</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
#container {
min-height:100%;
}
#clearfoot {
clear:both;
height:60px;
overflow:hidden;
}
#footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
background:#C0C0C0;
text-align:center;
padding:5px;
font-weight:bold;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
html {
overflow-y:hidden;
overflow-x:hidden;
}
body {
overflow-y:auto;
height:100%;
}
#footer {
position:absolute;
bottom:-1px;
width:expression(parseFloat(document.body.clientWidth - 10));
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="content"> content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
content<br />
<br />
</div>
<div id="clearfoot">&nbsp;</div>
<div id="footer">My Footer</div>
</div>
</body>
</html>
It uses an IE expression for the width but other than that the footer is fixed without JS.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum