Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Floating column heads and overflow problem in FF

Posted on 2009-05-11
2
Medium Priority
?
451 Views
Last Modified: 2013-12-12
My goal is to have my column headers float and remain static while users scroll through a list of values. I dug up some CSS code that does this well, at least in IE. All page code is in PHP, the columns, etc., are written in HTML tables, but he floating is done with CSS.

The problems come with FF (v3x) - when one thing works, another does not. I would prefer to have the vertical span of my tables be 100%. In FF, when set at 100%, I do not get scrollbars using the overflow:auto CSS function. When I use a static vertical length (i.e. 600px) , I get the scrollbars, but all of my cells automatically extend in height to fill the static length when there are not enough rows to organically fill that length. In IE (testing in 6) it all works without issue. I've included my code below. Thanks in advance.
CSS:
.table-header{position:relative;top:-1px;font:weight:bold;}
.table-header th{
font-weight:bold;
font-size:13px;
}
.table-body{OVERFLOW:auto;HEIGHT:100%;WIDTH:100%;}
.table-body td{
font-weight:normal;
padding:0px;
margin:0px;
height:20px;
min-height:20px;
}
.grid-div{OVERFLOW:auto;HEIGHT:590px;WIDTH:100%}
 
HEAD SCRIPT
<script language="javascript" >
       window.onload = function(){
              if (document.all){
//REMOVE TBODY STYLE FOR IE
                     var gridBody = document.getElementById("GridBody");
                     gridBody.className = '';
              } else {
//REMOVE DIV STYLE FOR NON-IE
                     var gridDiv = document.getElementById("GridContainer");
                     gridDiv.className = '';                 
              }
       }
</script>
 
BODY CODE
<div id="GridContainer" class="grid-div">
<table id="Grid" width="100%" border="0">
<tr class="table-header" bgcolor='#fffedd'>
<!--create column headers -->
                <th align='left' style='padding-left:15px;'>VALUE</th>
				<th align='left'>VALUE</th>
				<th align='left'>VALUE</th>
                <th align='left'>VALUE</th>
                <th align='left'>VALUE</th>
				<th align='left'>VALUE</th>
                <th style='padding-right:20px;'>&nbsp;</th>
</tr>
<tbody id="GridBody" class="table-body">
<?php
while ($row = mysql_fetch_array($getresult)) {
	  $company_id = trim($row['company_id']);
	  
  echo "
  <form method='post' action='PAGE.PHP' name='contform' target='_parent'>
  <tr valign='top'>
    <td valign='top' style='padding-left:15px;'>VALUE</td>
	<td valign='top'>VALUE</td>
	<td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
    <td valign='top'>VALUE</td>
  </tr>
  ";  
  }
?>
 
<!--COPY ROWS UNTIL YOU SEE A SCOLLBAR IN YOUR BROWSER-->
</tbody>
</table>
</div>

Open in new window

0
Comment
Question by:dulatoag2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 8

Accepted Solution

by:
Bobaran98 earned 1000 total points
ID: 24361210
The kind of project you're playing with can be a bit tricky, and I've definitely agonized my share over this sort of thing.
 
 I've thrown something together for you as an alternative to all that heavy CSS styling/positioning and cross-browser frustration.  Take the code below and save it as a fresh PHP file, then upload it, and point your browser to it.  By default it will show 15 rows.  If you want to change that number, just add the "num" variable in the query string, for example:
 
http://www.mysite.com/this_file.php?num=37

  I've listed what I see to be the pros and cons of my approach

PROS
  • Completely cross-browser compatible (you'll see some differences on the table/cell borders, but I'll let you worry about that).  I've tested on the following browsers:
    • Win - IE7
    • Win - Firefox
    • Win - Opera
    • Win - Chrome
    • Mac - Firefox
    • Mac - Opera
    • Mac - Safari
  • Column headers always line up properly with table columns.
  • The height of the table (and therefore of each row) is not stretched to meet a minimum height if you have a small number of rows.
  • Scrollbars activate when needed.
  • Very simple code, easy to understand and tweak.
CONS
  • The footprint of the entire table must be a static width and height; it does not shrink automatically if you have a small number of rows (I tried using the CSS min-height and max-height properties for this, but they didn't behave correctly in IE7... and perhaps not other browsers either.
  • The horizontal scrollbar at the bottom is always visible, though disabled.
If you think of any other cons, let me know. ;-)  What do you think?

<?php
	if(isset($_REQUEST['num'])) { $numRows = $_REQUEST['num']; }
	else { $numRows = 25; }
?>
 
<HTML>
 <HEAD>
  <TITLE> Floating Table Headers </TITLE>
 
<style type="text/css">
	<!--
	td { border: solid 1px #555555;
	-->
</style>
 
 </HEAD>
 
 <BODY bgcolor="#AA3333">
 
<center>
 
<p>
<div style="position:relative;width:622px;height:541px;background:#000000;">
	<div style="position:absolute;left:3px;top:3px;width:616px;height:535px;background:#AAAAAA;">
		<table style="position:absolute;left:0px;top:0px;width:600px;height:35px;border:solid 1px #000000;background:#AAAAAA;">
			<tr>
				<td width='100'><u><b>Column 1</b></u></td>
				<td width='200'><u><b>Column 2</b></u></td>
				<td width='100'><u><b>Column 3</b></u></td>
				<td width='50'><u><b>Col 4</b></u></td>
				<td width='150'><u><b>Column 5</b></u></td>
			</tr>
		</table>
		<div style="position:absolute;left:0px;top:35px;width:616px;height:500px;overflow:scroll;background:#DDDDDD;">
		<table style="position:absolute;left:0px;top:0px;width:600px;border:solid 1px #000000;background:#FFFFFF;">
			<?php
				for($i=1;$i<=$numRows;$i++) {
					echo "<tr>";
					echo "<td width='100'>Column 1-$i</td>";
					echo "<td width='200'>Column 2-$i</td>";
					echo "<td width='100'>Column 3-$i</td>";
					echo "<td width='50'>4-$i</td>";
					echo "<td width='150'>Column 5-$i</td>";
					echo "</tr>";
				}
			?>
			</table>
		</div>
	</div>
</div>
</center>
 
 
 </BODY>
</HTML>

Open in new window

0
 

Author Comment

by:dulatoag2
ID: 24416460
Sorry for the response delay! This works great and I'll deal with the limitations of having to have static dimensions. It's all about compromise. The best thing is it's simple. I appreciate your help!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question