MozillaZine


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

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
NGLN
 
Posts: 3
Joined: April 9th, 2007, 8:09 am
Location: The Netherlands

Post Posted April 9th, 2007, 8:34 am

Hello forum,

I do have the following index.htm:
Code: Select all
<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?

Daifne
Moderator

User avatar
 
Posts: 123071
Joined: July 31st, 2005, 9:17 pm
Location: Where the Waters Meet, Wisconsin

Post Posted April 9th, 2007, 8:48 am

Moving to Web Development

jscher2000

User avatar
 
Posts: 11686
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted 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
 
Posts: 3
Joined: April 9th, 2007, 8:09 am
Location: The Netherlands

Post Posted 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

User avatar
 
Posts: 11686
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted 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
 
Posts: 3
Joined: April 9th, 2007, 8:09 am
Location: The Netherlands

Post Posted 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.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 0 guests