Skip to content
December 14, 2008 / ranacse05

Fixing position:fixed for IE


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&gt;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 ? 🙂

Advertisements

One Comment

Leave a Comment
  1. manchumahara / Dec 15 2008 5:45 am

    Rana it will be fine if u discuss more specific like put two images before fixing and after fixing, where is the problem and what’s the solution.

    For div based design, while css coding check both in ie and ff same time.

    Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: