Issue while trying to give a floating effect to a footer bar in IE
Posted
by Shailesh
on Stack Overflow
See other posts from Stack Overflow
or by Shailesh
Published on 2010-06-08T22:06:06Z
Indexed on
2010/06/09
7:12 UTC
Read the original article
Hit count: 293
Filed under:
css-positioning
Hi, I'm trying to put a footer bar at the bottom of the browser no matter what the length of the content is. The footer bar should always be visible to the user and should be on the top layer. Following is my code:
<html>
<head>
<style type="text/css">
#wrapper {
width: 910px;
margin: 0 auto;
padding: 0px 20px 50px 20px;
text-align: left;
}
#footer-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
bottom:0;
clear:both;
font-size:11px !important;
left:0;
position:fixed;
white-space:nowrap;
width:100%;
z-index:8000;
}
</style>
<script>
var counter = 0;
function addContent(ctr)
{
document.getElementById(ctr).innerHTML=document.getElementById
(ctr).innerHTML+"
dynaContent"+counter; counter++;
}
</script>
</head>
<body>
<div>
<div><input type="button" onclick="addContent('wrapper')" value="Add dynaContent" /></div>
<div id="wrapper" style="color:#FFFFFF; background-color: #111111;"> STATIC TEXT - HEADER-WRAPPER </div>
<div style="color:#FFFFFF;background-color: #555555;">STATIC TEXT - FOOTER-WRAPPER</div>
</div>
</body>
</html>
It's working fine in Mozilla Firefox and giving the intended results, but, in IE, the footer bar always sticks just under the header.
Please help.
Thanks in advance, Shailesh.
© Stack Overflow or respective owner
