Today i was trying to code a fixed footer . It took very small time to code. And that works ok in FireFox but when i open that page in Internet Explorer it looks different . Here is the first code .
body {
margin:0px;
padding:0 0 0 0 ;
}
#footer{
height:50px;
width:100%;
position:fixed;
top:95%;
background:#efefef;
border:1px solid #ccc;
}
#main {
height:1200px;
background:#A8C5FF;
}
<div id=”main”></div>
<div id=”c” align=”center”>
<div id=”footer”>Its Fixed !</div>
</div>
Then i try to fix this problem . The code below works in IE and the FF fine .
<!-- IE in quirks mode -->
body{
margin:0;
padding:0 0 50px 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:30px;
}
#chat{
background:#efefef;
border-top:1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
width:800px;
height:100%;
padding:0px;
margin:0px;
}
@media screen{
body>div#footer{
position:fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
<div id="footer" align="center">
<div id="chat">
Content can be placed here......
</div>
</div>
<div id="content">
<span style="height:1300px"></span>
</div>
Nice hun ?