Fixed column issue with Firefox

[xsw1971]

I have data that is output in a table with both horizonal and vertical scroll bars. The table also includes a fixed row and a fixed column. This works fine in IE and Netscape, but not Firefox. I am just learning about CSS so I'm not really sure how to troubleshoot this.

CSS:

<style type="text/css">
  /* The wrapper around the scroll table */
  #container {
  overflow: auto;
  width: 100%;
  height: 500px;
  border: 1px silver solid;
  }


  /* The scroll table */
  table {
  border-collapse: collapse;
  width: 100%;
  background-color: ivory;
  }

  /* The scroll table data cells */
  td {
  white-space: nowrap;
  border: 1px silver solid;
  padding:0 5px 0 5px;
  }

  /* The fixed column in the scroll table */
  .columnHeader {
  background-color: #ffffcc;
  padding:0 5px 0 5px;
  text-align:left;
  left: expression(document.getElementById("container").scrollLeft-2);
  position: relative;
  }

  /* The first row of the scroll table */
  thead th {
  background-color: navy;
  color: white;
  position:relative;
  cursor: default; 
  }
      	
  /* Makes the first row fixed */
  #dataTable thead th {
  top: expression(document.getElementById("container").scrollTop-2);
  z-index: 20;
  }
</style>

And here's the scroll table. It's built using coldfusion so I have left out all the CF code that actually populates the table. I'm only concerned with the CSS.

<div id="container">
<table id="dataTable">
<thead>
  <tr>
    <th>Employee</th>
    <!-- code here loops and creates weekday names --!>
    <th>Mon, Tues, Wed, etc.</th>
    <!-- end loop --!>
  </tr>

  <!-- print the date for each day of the week -->
  <tr>
    <th>&nbsp;</th>
    <!-- code here loops and creates dates --!>
    <th>date</th>
    <!-- end loop --!>
  </tr>
</thead>

<tbody>
  <!-- code here loops through query records -->
  <tr>
    <td class="columnHeader">employee</td>
    <!-- another loop that outputs data for each day of the week --!>
    <td>data</td>
    <!-- end inner loop --!>
  </tr>
  <!-- end outer loop --!>
</tbody>

</table>
</div>

When it's working, the thead section with the dates is fixed, and the first column containing the employee name is fixed. Does anyone see what it is that makes Firefox not want to play nice?

Thanks!!

 

[Vragabond]

For one, FF does not support expressions in css. That is an IE only thing. I guess you're talking about Netscape 8, which works with IE engine, so it is the same. Something like this is actually much easier to do in FF if I recall. Here's one that works cross-browser with pure css (javascript is added just for visual effect):

http://www.imaputz.com/cssStuff/bigFourVersion.html

 

[xsw1971]

Thank you for your quick response! I will look at that URL and see if I can apply it to my table.

Thanks!