Fixed page layout in IE6

By : Mocky
Source: Stackoverflow.com
Question!

Header, footer and sidebars have fixed position. In the center a content area with both scroll bars. No outer scroll bars on the browser. I have a layout that works in IE7 and FF. I need to add IE6 support. How can I make this work?

Here is an approximation of my current CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Layout</title>
        <style>
            *{margin:0px;padding:0px;border:0px;}
            .sample-border { border: 1px solid black; }
            #header{
              position:absolute;
              top:0px;
              left:0px;
              right: 0px;
              height:60px;
             }
             #left-sidebar{
              position:absolute;
              top:65px;
              left:0px;
                          width:220px;
              bottom: 110px;
             }
             #right-sidebar{
              position:absolute;
              top:65px;
              right:0px;
              width:200px;
              bottom: 110px;
             }
             #footer{
              position:absolute;
              bottom:0px;
              left:0px;
              right: 0px;
              height:105px;
             }

             @media screen{
              #content{
                position: absolute;
                top: 65px;
                left: 225px;
                bottom: 110px;
                right: 205px;
                overflow:auto;
               }
               body #left-sidebar,  body #right-sidebar, body #header, body #footer, body #content{
               position:fixed;
              }
            }
        </style>
    </head>
    <body>
        <div id="header" class="sample-border"></div>
        <div id="left-sidebar" class="sample-border"></div>
        <div id="right-sidebar" class="sample-border"></div>
        <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;"/></div>
        <div id="footer" class="sample-border"></div>
    </body>
</html>
By : Mocky


Answers

These answers were helpful and they did let me add a limited form of fixed positioning to IE6, however none of these fix the bug that breaks my layout in IE6 if I specify both a top and a bottom css property for my sidebars (which is the behavior I need).

Since top and bottom can't be specified, I used top and height. The height property turned out to be very necessary. I used javascript to recalculate the height when the page loads and for any resize.

Below is the code I added to my test case to get it to work. This could be much cleaner with jQuery.

<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
  height: 455px;
}
body>div.ie6-autowidth {
  right: ;
  width: 530px;
}
</style>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<script type="text/javascript">

function fixLayout() {
   if (document.documentElement.offsetWidth) {
      var w = document.documentElement.offsetWidth - 450;
      var h = document.documentElement.offsetHeight - 175;
      var l = document.getElementById('left-sidebar');
      var r = document.getElementById('right-sidebar');
      var c = document.getElementById('content');

      c.style.width = w;
      c.style.height = h;
      l.style.height = h;
      r.style.height = h;
   }
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->
By : Mocky


Add the following code to the <head>

<!--[if lte IE 6]>
<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
.ie6fixed {
    position: absolute;
}
</style>
<![endif]-->

Add the ie6fixed CSS class to whatever you want to be position: fixed;

By : palotasb


This video can help you solving your question :)
By: admin