How to handle overflow:auto in a DIV in a TABLE in an IFRAME

NGLN · Post by **NGLN** » April 9th, 2007, 8:34 am

Hello forum,

I do have the following index.htm:

<html>
<head>
</head>
<body>
  <table width="100%" height="100%">
    <tr>
      <td style="background: url('images/gradientgreen960.png') repeat-x" align="center">
        <iframe name="content" id="content" src="home2.htm" width="770px" height="100%" frameborder="0" scrolling="no">
          <p>
            Your browser doesn't ...
          </p>
        </iframe>
      </td>
    </tr>
  </table>
</body>
</html>

and the following home2.htm:

Code: Select all

<html>
<head>
</head>
<body>
  <table width="100%" height="100%">
    <tr>
      <td>
        <div style="overflow: auto; width: 100%; height: 100%; border: 0px">
          <p>
            Some text<br/>
            Some text<br/>
            Some text<br/>
            Some text<br/>
            Some text<br/>
            Some text
          </p>
        </div>
      </td>
    </tr>
    <tr>
      <td style="background: url('images/punt.gif') no-repeat bottom; height: 40px"/>
    </tr>
  </table>
</body>
</html>

When sizing a Firefox-browser, there doesn't appear a scrollbar next to "some text" as I would expect of the DIV with overflow:auto.
MS InternetExporer does show the scrollbar.

How can or must I change the above documents to get the scrollbar?

Post by **Daifne** » April 9th, 2007, 8:48 am

Moving to Web Development

jscher2000 · Post by **jscher2000** » April 9th, 2007, 5:19 pm

You want the inactive scrollbar when scrolling is not needed? I think you can do it this way:

Code: Select all

overflow-y:scroll;

NGLN · Post by **NGLN** » April 9th, 2007, 8:41 pm

Thanks! That would work great if I don't want an horizontal scrollbar.

Unfortunately, it doesn't solve the problem. Auto is the preferred setup, but in both situations (scroll, auto) the scrollbar will not become active.

I have discovered that home2.htm alone shows the problem also. I think it has something to do with height: 100%; it doesn't relate the 100% height to the parent height. When I use fixed sizes, everything works fine.

Note: in both IE and FF, the problems become a lot worse when I use any DOCTYPE declaration, also because of the height: 100% (in both table- and div-sections).

The idea is to fill up the total windowheight with a static header and footer, and to show a scrolling content in between.

Any other idea how to get to this goal? Or how to affect the html according to the different browsers?

jscher2000 · Post by **jscher2000** » April 9th, 2007, 10:26 pm

NGLN wrote:Note: in both IE and FF, the problems become a lot worse when I use any DOCTYPE declaration, also because of the height: 100% (in both table- and div-sections).

This is a signal that you are relying on some funky historical rendering. Probably best to bite the bullet and fix it.

NGLN wrote:The idea is to fill up the total windowheight with a static header and footer, and to show a scrolling content in between.

Firefox requires the following CSS rule to make vertical percentages meant to be a percentage of the "viewport" work:

Code: Select all

html, body {height:100%;}

The following usually is a good idea, too:

Code: Select all

html, body {margin:0; padding:0;}

NGLN wrote:Any other idea how to get to this goal? Or how to affect the html according to the different browsers?

There are many sites offering CSS layouts to get you started. Certainly the wrapper table is not helping here. Unfortunately, I haven't bookmarked them...

NGLN · Post by **NGLN** » April 15th, 2007, 2:05 pm

This is a signal that you are relying on some funky historical rendering. Probably best to bite the bullet and fix it.

Yes, I know and I understand. In the last week I have tried any combination of iframes, framesets, position: fixed, overflowing div's, etc... but it didn't gave the appropriate result. So, I now use a workaround:

Code: Select all

div.frame {
  overflow: auto;
  margin-left: 10px;
  margin-right: 10px;
  width: 750px;
  height: 285px; /* Other browsers */
  _height: 100%; /* IE browsers */
  border: 0;
}

This gives the desired result in IE, and in FF it is also not so bad.

Thanks very much for your post and time.