Some IE7/IE8 CSS table styling queries

Hello there,

I have two seemingly simple css quirks that I cannot seem to get working;   I'd appreciate a little guidance as previous web searches have left me exasperated.

My first problem is a table header background that is repeating in IE7.  My code is:

[code]#apptable thead {
display: table-header-group;
height: 70px;
width: 665px;
background: url(../images/apptableheader1.png) 0 0;
background-repeat: no-repeat !important;
      }[/code]

And my actual html is:

[code]<table id="apptable">
<thead>
<tr class="table-header"><th>APPLICANT ID</th>
    <th>FIRST NAME</th>
    <th>SURNAME</th>
    <th>AGE</th>
    <th>GENDER</th>
</tr>
</thead>
<tbody id="appData"></tbody>
</table>[/code]

This works fine in IE8, FF, Opera etc. but in IE7 it duplicates the image at each "th" when its supposed to span across the entire table thead.

Secondly I've been trying to add a vertical scroll bar to the same table around the "tbody" element.

This element is used in a javascript function to dynamically create new rows and data cells from an XML dom document.

I've enclosed part of the javsacript function in the code section below as it's quite long...

The code snippet below is basically setting the tbody height and overflow property based on the size of a variable called dataHeight which is basically the number of records to be tabulated(data.childNodes.length) mutliplied by the height of a cell (20px - As specified in my css).

In firefox this function works great - tabulating the results, and if the "dataHeight" variable exceeds "260" it will set the table height to 260px and set a overflow y value of "scroll" to create a vertical scroller.

IE7, IE8, and Opera however merely expand the table body height to accomodate the "overflow".

I've tried placing the tbody into a seperate div, and consequentially table, and change the Div's height & overflow, but there were alot of problems with alignment of the data in relation to the table header titles which were encapsulated in their own table (to avoid being scrollable).

Has anyone any guidance onto how to correct or fix these rendering issues in IE7/IE8.  (I'm not very concerned with it being perfect on Opera).

Thanks,

J.

var tbody = document.getElementById('appData');
var dataHeight = (data.childNodes.length) * 20;
	if(data.childNodes.length == 1) 
	{
		tbody.style.height = 20 + "px";
		tbody.style.overflowY = "hidden";
		//document.getElementById("scrollableapptable").style.overflowY = "hidden";
	
		}
	else if(dataHeight > 20 && dataHeight < 260) 
	{
		tbody.style.height = dataHeight + "px";
		tbody.style.overflowY = "auto";
		tbody.style.overflowX = "hidden";
		}
	else if(dataHeight >= 260) 
	{
 
		//tbodycon.style.height = 260 + "px";
		tbody.style.height = 260 + "px";
		tbody.style.overflowY = "scroll";
		tbody.style.overflowX = "hidden"
		
		}	
	else {
		tbody.style.height = "auto";
		}

Select allOpen in new window