Issue while trying to give a floating effect to a footer bar in IE
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 hel开发者_如何学Gop.
Thanks in advance, Shailesh.
First of all, your footer wrapper is missing the id attribute: <div id="footer-wrapper" ...>
Then it depends on which version of IE you're using:
- It won't work with IE6 at all (doesn't understand
position: fixed) - For IE7 and IE8,
position: fixedworks only, if you put it in standards mode. The easiest way to do this, is to insert<!doctype html>as the first line (it must be the very first line, no comments or anything in front of it)
There are, however, other techniques to create a footer, see e.g. How do you get the footer to stay at the bottom of a Web page?
加载中,请稍侯......
精彩评论