Some IE7/IE8 CSS table styling queries

JMackey
JMackey used Ask the Experts™
on
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";
		}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hello JMackey,

For your first question, instead of applying the style definitions to the THEAD apply it to the TR that enclose the TH. Then remove the display: table-header-group; property. Just try it.

Hope it helps.
Expert of the Year 2014
Top Expert 2014

Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial