troubleshooting Question

Some IE7/IE8 CSS table styling queries

Avatar of JMackey
JMackey asked on
CSS
2 Comments1 Solution283 ViewsLast Modified:
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";
		}
ASKER CERTIFIED SOLUTION
rmariuzzo

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros