It looks like this:

Firefox Firefox Internet Explorer Internet Explorer Try the code bellow:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Page</title>
  <style type="text/css">
    html, body, center, form
    {
      height: 100% !important;
      overflow: hidden;
      margin: 0px auto;
    }
  </style>
</head>
<body>
  <form id="form1">
    <center>
      <table style="height: 100%;">
        <tr>
          <td style="height: 100px"></td>
        </tr>
        <tr>
          <td align="center">
            <div style="width: 10%; height: 100%; float: left; background-color: Blue;">
              text here</div>
            <table style="width: 80%; height: 100%; table-layout: fixed; float: left" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td style="width: 6px; height: 5px; background: url(./images/corner_red_topleft.gif) no-repeat scroll 0pt 0pt transparent;" align="left" valign="top">
                  </td>
                  <td style="width: 100%; height: 5px; background: url(./images/line_red_top.gif) repeat-x scroll 0pt 0pt transparent;" align="center" valign="top">
                  </td>
                  <td style="width: 6px; height: 5px; background: url(./images/corner_red_topright.gif) no-repeat scroll 0pt 0pt transparent;" align="right" valign="top">
                  </td>
                </tr>
                <tr>
                  <td style="width: 6px; background: url(./images/line_red_left.gif) repeat-y scroll 0pt 0pt transparent;" align="left" valign="middle">
                  </td>
                  <td style="height: 100%; background: url(./images/pixel_red.gif) repeat scroll 0pt 0pt transparent;" align="center" valign="middle">
                    <div style="width: 100%; text-align: left; position: relative; height: 100%; overflow-y: auto; display: -moz-box;">
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                      text here<br />text here<br />text here<br />text here<br />
                    </div>
                  </td>
                  <td style="width: 6px; background: url(./images/line_red_right.gif) repeat-y scroll 0pt 0pt transparent;" align="right" valign="middle">
                  </td>
                </tr>
                <tr>
                  <td style="width: 6px; height: 5px; background: url(./images/corner_red_bottomleft.gif) no-repeat scroll 0pt 0pt transparent;" align="left" valign="top">
                  </td>
                  <td style="width: 100%; height: 5px; background: url(./images/line_red_bottom.gif) repeat-x scroll 0pt 0pt transparent;" align="center" valign="top">
                  </td>
                  <td style="width: 6px; height: 5px; background: url(./images/corner_red_bottomright.gif) no-repeat scroll 0pt 0pt transparent;" align="right" valign="top">
                  </td>
                </tr>
              </tbody>
            </table>
            <div style="width: 10%; height: 100%; float: right; background-color: Blue;">
              text here</div>
          </td>
        </tr>
        <tr>
          <td style="height: 100px"></td>
        </tr>
      </table>
    </center>
  </form>
</body>
</html>

It works as expected in Firefox, but in Internet Explorer everything fails miserably.

The display style of the scrollable div is -moz-box that is only recognized by Firefox, but this is only to adjust the existing scrollbar to the available area in Firefox.

From my point of view, I would expect the browser to understand that the scrollbar should be always completely visible.

By commenting the outer table, leaving only the inner table, you can get a simpler version of the page and try to solve it from there.

I really need help to solve this problem.

  • What version of IE are you using. For me, in IE 8, the solution above works fine. Ktash about 8 years ago

2 answers

Ktash 1851
1
point

Well, nested tables are really really frowned upon. At least by me. Unless you have a reason for using them, outside of getting the layout you want, I don't feel you should use them. Table-based layouts are something I consider bad practice.

That said, my solution to your issue is to replace the table-based layout. Not because I think it is semantically wrong, but because using divs solves your problem and easily allows you almost the exact same layout. I've created an example Fiddle so that you can see what the code and end result look like. That example there should render in IE 7+ without issue. If you're trying to support IE 6 as well, I used the conflicting absolute positions trick, so it would need an IE 6 fix (an expression for the height).

Update

I've updated it since I posted to make it exactly like your example (with different colors). Though the border-radius css works in non-IE browsers only.

Update 2

Whoops, should really double check my solutions in IE 7. Now it should work in IE 7. It was having issues with the combination of floats and relative positioning.

Answered about 8 years ago by Ktash