Css – Scrolling DIVs in IE6 with CSS

asp.netcssinternet-explorer-6

I've been writing a small notice board site in ASP.NET and nothing i do will make it work properly in IE6. The main page has a header DIV, with the content region below it. Within this region are three further regions, a search facility in the top left, a list of notices below it, and the currently displayed notice to the right of these two. The search and notice list regions are 240px wide, and the displayed notice region takes up the rest of the width. The problem is that the notice list and displayed notice regions should both scroll if the content is bigger than the displayed area (i.e. overflow:auto style) but this doesn't happen in IE6. Everything else displayes fine. The layout is as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head runat="server">
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Notice Board</title>
    <style type="text/css">
      body
      {
        margin:0;
        border:0;
        padding:0;
        height:100%;
        max-height: 100%;
        overflow: hidden; 
      }

      #header
      {
        position:absolute; 
        top:0; 
        left:0; 
        width:100%; 
        height:130px; 
        overflow:hidden; 
      }

      #footer
      {
        position:absolute; 
        bottom:0; 
        left:0;
        width:100%; 
        height:0px; 
        overflow:hidden; 
      }

      #content
      {
        position:absolute; 
        top:130px;
        left:0;
        bottom:0px; 
        right:0; 
        overflow:hidden; 
      }

      * html body
      {
        padding:130px 0 0 0; 
      }

      * html #content
      {
        height:100%; 
        width:100%; 
      }

      #leftdiv 
      {
        position:absolute;
        left:0;
        width:240px;
        top:0;
        height:100px;
        overflow:hidden;
      }

      #listdiv 
      {
        position:absolute;
        left:0;
        width:240px;
        top:100px;
        bottom:0px;
        overflow:auto;
      }

      #noticediv
      {
        position:absolute;
        left: 270px;
        right:0;
        top:0;
        bottom:0;
        overflow:auto;
      }
    </style>
  </head>
  <body>
    <form id="form1" runat="server" method="post">
      <div id="header" >
        <!-- Header content goes here -->
      </div>

      <div id="content">

        <div id="leftdiv">
          <!-- Content region for the search facility goes here -->
        </div>

        <div id="listdiv">
          <!-- Content region for the notice list goes here -->
        </div>

        <div id="noticediv" >
          <!-- Content region for the displayed notice goes here -->
        </div>
      </div>
    </form>
  </body>
</html>

Any ideas?

Best Answer

If you are still stuck with supporting IE6, then a lot of CSS issues are resolved by using Dean Edwards' IE7 scripts -- I've not faced this particular problem, but have been able to take designs from more compliant browsers and have them "just work" using these scripts. With the magic of IE conditional comments, you can just serve the fix-ups to those people still stuck with browsers that are 2 versions behind current.

Related Topic