First record in table overlapped by header of table in IE.

Question

Created a table which works fine in IE6,7 but in FF the header hides the first datarow.

<g:if test="${params.history!=null}">
<div style="width:791px;padding-bottom:10px;overflow-y:auto;${(lstDNCallEntries.size()>0)?'height:100px':''}">
<table class="table">
<thead style="position: absolute;">
 <% params=params.findAll{ k,v -> k != 'sort'} %>
<td class="certify_head" width="87" style="text-align: center">title</td>
<td class="certify_head" width="89" style="text-align: center" >action</td>
      <td class="certify_head" width="66" style="text-align: center" >list</td>
      <td class="certify_head" width="118" style="text-align: center" >selection</td>
      <td class="certify_head" width="110" style="text-align: center" >source</td>
      <td class="certify_head" width="64" style="text-align: center" >${message(code:'phoneoptoutgranularity.gsp~title.user')}</td>
      <td class="certify_head" width="82" style="text-align: center" >Office</td>
      <td class="certify_head" width="90" style="text-align: center" >Effective Date</td>
     </thead>
     <tbody class="scrollContent">
      <g:if test="${lstDNCallEntries.size() > 0}">
       <g:each in="${lstDNCallEntries}" var="phoneHistory" status="i">
        <tr class="${(i % 2) == 0 ? 'normalRow' : 'alternateRow'}"
          onMouseOver="this.style.backgroundColor='#ffffd9'"
          onMouseOut="this.style.backgroundColor=''">
         <td width="90" align="center" valign="center">${phoneHistory.date}</td>
         <td width="92" valign="center" style="font: normal 12px Arial, Helvetica, sans-serif;">${phoneHistory.action}</td>
         <td width="71" align="center" valign="center">${phoneHistory.list}</td>
         <td width="122" align="center" valign="center">${phoneHistory.preferencekey}</td>
         <td width="110" align="center" valign="center">${phoneHistory.source}</td>
         <td width="69" align="center" valign="center">${phoneHistory.user}</td>
         <td width="85" align="center" valign="center">${phoneHistory.office}</td>
         <td width="90" align="center" valign="center">${phoneHistory.effectiveDate}</td>
        </tr>
       </g:each>
      </g:if>
      <g:else>
       <tr>
        <b>
        <td colspan="7" width="770" align="center"><b><g:message
         code="phoneoptoutgranularity.gsp~historydetails" /></b></td>
        </b>
       </tr>
      </g:else>
     </tbody>
    </table>
    </div>
</g:if>

Please help where i can modify.

-ss

Answer 1

Looks like you're missing the <tr> in your top row.

Answer 2

Why is that position:absolute in there? Off the top of my head, pos:abs will take the thead out of the flow which will bump the first row up effectively hiding it. Possibly you could fix this with some margin/padding on the first row but you'd have to justify the pos:abs first.

The other thing I can see is that all the thead contents are td's not th's, but I doubt that would create this effect.

edit: gave it a rough test, it's definitely the pos:abs (root of all evil :P). Possibly you want position:fixed instead? And the other poster is right, you're missing a tr