Programming Answer: Fixed page layout in IE6

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>

From stackoverflow Mocky

Might be overkill for your project, but Dean Edwards' IE7 javascript adds support for fixed positioning to IE6.

From ceejayoz
Check Glish This should do close to what you're looking for.

From Chuck
Try IE7.js. Should fix your problem without having to make any modifications.

Link: IE7.js

From Cade

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;

From palotasb

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]-->

From Mocky

check out the pure css hacks below... some require forcing it into quirks mode (I think that's the most robust) but all work really well:

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ http://tagsoup.com/cookbook/css/fixed/

I've used this to great effect, hope it helps!

From $pageUsers[$post.author].name

Programming Answer

Friday, February 4, 2011

Fixed page layout in IE6

0 comments:

Post a Comment

Blog Archive