Issues with FF, IE works fine.

chikna

03-18-2009, 01:42 PM

I have following code and works great if there are many records. However, for just one record, FF keeps record in the middle rather than in 1st row. Can someone please find a fix for me? Thanks.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Station</title>

<style type="text/css">
div.tableContainer {
width: 65%; /* table width will be 99% of this*/
height: 120px; /* must be greater than tbody*/
overflow: auto;
margin: 0 auto;
}

table {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #f7f7f7;
}

table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 100px;
overflow-x: hidden;
}

thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
}

thead td, thead th {
text-align: center;
font-size: 14px;
background-color: oldlace;
color: steelblue;
font-weight: bold;
border-top: solid 1px #d8d8d8;
}

td {
color: #000;
padding-right: 2px;
font-size: 12px;
text-align: right;
border-bottom: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>

</head>

<body>

<div class="tableContainer">
<table cellspacing="0">
<thead>
<tr>
<td width="18%">Station</td>
<td width="38%">Date</td>
<td width="28%">Status</td>
<td width="16%">Num.</td>
</tr>
</thead>

<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Eldarrion

03-18-2009, 02:44 PM

Don't see how this is related to javascript in any way, but... most of the time, IE would be the browser that is doing wrong, rather than FF. At this point, it seems that the following seems to be the cause of your trouble (marked in red):

table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
height: 100px;
overflow-x: hidden;
}

And yes, as the comment clearly states, the child selector syntax which IE6 and older do not support.... would essentially cause IE6 and older to ignore the whole property, thus it displays incorrectly in IE, but it does quite well in FF, assigning the proper height to the tbody. Either way, this is not a JS issue, but an issue with CSS. Please post in the appropriate forum in the future and ask a mod to move this to the proper forum.

chikna

03-18-2009, 03:43 PM

Thanks. I removed height and now header is also scrolling in FF.

chikna

03-18-2009, 04:27 PM

I did it with different way using DIV. Thanks.