Scrolling table different behaviour in 3 browsers

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • beary
    New Member
    • Nov 2006
    • 170

    #1

    Scrolling table different behaviour in 3 browsers

    I'm trying to make a table with fixed header but scrolling body. The page is here

    Here's the summary of what happens in the browsers:

    FF3: Works almost perfectly. Scrolls as desired. Annoying unneeded bottom scrollbar is the only (minor) problem.

    Safari 3 on PC: Displays table correctly but no scroll.

    IE7: Really weird. Height of table rows is about 10-15 times what it should be, and of course, no scroll at all.

    I haven't tested in IE6.

    Is anyone able to view the link in either IE7 or Safari and give me some ideas why it's doing this.

    Thanks
  • David Laakso
    Recognized Expert Contributor
    • Aug 2008
    • 397

    #2
    This is a simple suggestion-- I have not tried this. Make two tables. The top table is stationary. Enclose the bottom table in a division. Assign the height to the division (instead of tbody), something like this:
    Code:
    #anchor {min-height:340px;overflow-y: scroll;}
    * html #anchor {height:340px;}
    Tweak either the the top or bottom table -- or both -- so the vertical rules(borders) line up. Safari will scroll vertically. Confirm Opera is on board. IE/6 and IE/7 should go along for the ride without the current height issue. Whether IE/6 will need to be hacked for width remains to be seen.

    Comment

    • beary
      New Member
      • Nov 2006
      • 170

      #3
      Thanks David. I have seen this method and may try to use it as a last resort. But to me it seems to be "cheating" a little. Also, I know it's something to do with my code, because on this other page (not mine) , scrolling works fine on all those browsers. I wonder if it's something to do with mine being in a table. And I'm really curious to know why IE7 goes so weird with the cell heights. Still hoping for help...

      Originally posted by David Laakso
      This is a simple suggestion-- I have not tried this. Make two tables. The top table is stationary. Enclose the bottom table in a division. Assign the height to the division (instead of tbody), something like this:
      Code:
      #anchor {min-height:340px;overflow-y: scroll;}
      * html #anchor {height:340px;}
      Tweak either the the top or bottom table -- or both -- so the vertical rules(borders) line up. Safari will scroll vertically. Confirm Opera is on board. IE/6 and IE/7 should go along for the ride without the current height issue. Whether IE/6 will need to be hacked for width remains to be seen.

      Comment

      • David Laakso
        Recognized Expert Contributor
        • Aug 2008
        • 397

        #4
        You'll likely have a lot more luck all around, including control of cell height, if you structure the table using the CSS Table Model.

        Comment

        Working...