Link to home
Start Free TrialLog in
Avatar of dulatoag2
dulatoag2

asked on

Floating column heads and overflow problem in FF

My goal is to have my column headers float and remain static while users scroll through a list of values. I dug up some CSS code that does this well, at least in IE. All page code is in PHP, the columns, etc., are written in HTML tables, but he floating is done with CSS.

The problems come with FF (v3x) - when one thing works, another does not. I would prefer to have the vertical span of my tables be 100%. In FF, when set at 100%, I do not get scrollbars using the overflow:auto CSS function. When I use a static vertical length (i.e. 600px) , I get the scrollbars, but all of my cells automatically extend in height to fill the static length when there are not enough rows to organically fill that length. In IE (testing in 6) it all works without issue. I've included my code below. Thanks in advance.
CSS:
.table-header{position:relative;top:-1px;font:weight:bold;}
.table-header th{
font-weight:bold;
font-size:13px;
}
.table-body{OVERFLOW:auto;HEIGHT:100%;WIDTH:100%;}
.table-body td{
font-weight:normal;
padding:0px;
margin:0px;
height:20px;
min-height:20px;
}
.grid-div{OVERFLOW:auto;HEIGHT:590px;WIDTH:100%}
 
HEAD SCRIPT
<script language="javascript" >
       window.onload = function(){
              if (document.all){
//REMOVE TBODY STYLE FOR IE
                     var gridBody = document.getElementById("GridBody");
                     gridBody.className = '';
              } else {
//REMOVE DIV STYLE FOR NON-IE
                     var gridDiv = document.getElementById("GridContainer");
                     gridDiv.className = '';                 
              }
       }
</script>
 
BODY CODE
<div id="GridContainer" class="grid-div">
<table id="Grid" width="100%" border="0">
<tr class="table-header" bgcolor='#fffedd'>
<!--create column headers -->
                <th align='left' style='padding-left:15px;'>VALUE</th>
				<th align='left'>VALUE</th>
				<th align='left'>VALUE</th>
                <th align='left'>VALUE</th>
                <th align='left'>VALUE</th>
				<th align='left'>VALUE</th>
                <th style='padding-right:20px;'>&nbsp;</th>
</tr>
<tbody id="GridBody" class="table-body">
<?php
while ($row = mysql_fetch_array($getresult)) {
	  $company_id = trim($row['company_id']);
	  
  echo "
  <form method='post' action='PAGE.PHP' name='contform' target='_parent'>
  <tr valign='top'>
    <td valign='top' style='padding-left:15px;'>VALUE</td>
	<td valign='top'>VALUE</td>
	<td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
  </tr>
  ";  
  }
?>
 
<!--COPY ROWS UNTIL YOU SEE A SCOLLBAR IN YOUR BROWSER-->
</tbody>
</table>
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Bobaran98
Bobaran98
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dulatoag2
dulatoag2

ASKER

Sorry for the response delay! This works great and I'll deal with the limitations of having to have static dimensions. It's all about compromise. The best thing is it's simple. I appreciate your help!