Connecting Tech Pros Worldwide Forums | Help | Site Map

Scrolling table different behaviour in 3 browsers

Familiar Sight
 
Join Date: Nov 2006
Posts: 161
#1: Oct 25 '08
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

Expert
 
Join Date: Aug 2008
Posts: 397
#2: Oct 25 '08

re: Scrolling table different behaviour in 3 browsers


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:
Expand|Select|Wrap|Line Numbers
  1. #anchor {min-height:340px;overflow-y: scroll;}
  2. * html #anchor {height:340px;}
  3.  
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.
Familiar Sight
 
Join Date: Nov 2006
Posts: 161
#3: Oct 25 '08

re: Scrolling table different behaviour in 3 browsers


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

Quote:

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:

Expand|Select|Wrap|Line Numbers
  1. #anchor {min-height:340px;overflow-y: scroll;}
  2. * html #anchor {height:340px;}
  3.  
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.

Expert
 
Join Date: Aug 2008
Posts: 397
#4: Oct 25 '08

re: Scrolling table different behaviour in 3 browsers


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.
Reply


Similar HTML / CSS bytes