div overflow-x scrollbar covers part of div

**msimmons** · Dec 6th, 2001, 02:58 PM

I have a table that I build dynamicly with ASP. I have unlimited height allowance but only 601 px width allowance. I have put the table into a div with a width of 601px and set the overflow-x style to auto. Theoreticly that will give me a scrollbar on the bottom but not make the table get any wider but if the form needs to be higher then it just is, no changes. That part works. my problem is that the scrollbar it adds covers 1/2 of the last row in the table rather than after it, which of course is no good at all.
Anyone run into this before?
Thanks in advance,
Michael

**CiberTHuG** · Dec 6th, 2001, 03:27 PM

No, not at all. But... before someone says anything about transparent gifs...

Can you use JavaScript to deduce the height of the table and dynamicly set the DIV to be just slightly taller?

Or, if you are not using table borders, then add a row to the end with   values. Hopefully the scroll bar will cover your null row.

**msimmons** · Dec 6th, 2001, 03:48 PM

I have to start the div before I build the table so that Idea wont work (was my first thought though).
The table is less than 601px wide most of the time and the first programmer wrote it using the border=1 way of drawing the table lines so it looks bad.

**CiberTHuG** · Dec 6th, 2001, 03:57 PM

You can still try the JavaScript thing. Even though the entire page is laid out, you want to set the DIV size onLoad. So as the UA is loading the page, it will figure the table height, and then set the DIV's height.

The user will never see it, but the DIV actually changed size when his browser started to display it.

**msimmons** · Dec 6th, 2001, 04:20 PM

im having a hard time getting the height of the table.
document.all.calendarTable.height is what i am trying

**CiberTHuG** · Dec 6th, 2001, 05:01 PM

This is all I have, and I can't get anything either.

Code:

<html>
  <head></head>
  <body>
    <table id="myTable">
      <tr>
        <td>Foo</td>
        <td>Bar</td>
      </tr>
    </table>
    <p>
      <script type="text/javascript">
        var myTable = document.getElementById("myTable");
        document.writeln(myTable.getPropertyValue("height"));
      </script>
    </p>
  </body>
</html>

But I can't find any really really good documentation for JavaScript, so I may be using something wrong.

The W3C did have a note saying that the current version of CSS does not specify how to resolve table height if it is different than the sum of the table's rows' heights.

Thread: div overflow-x scrollbar covers part of div

Thread Tools

Display

div overflow-x scrollbar covers part of div

Posting Permissions