repeating table problem

[samoht]

hello again,

 

so I thought I was all done with my repeating tables of "features" - because all was well in fierfox - but of course when I tested on ie my hopes where dashed.

 

In firefox the tables stack side by side until they reach the edge of the table they are nested in then they start a new row of tables on the next line. In IE the tables continue to populate 1 single line inspite of the fact that the user cannot see them.

 

any ideas how to fix??

 

 

here is the code:

<?php ?>     
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding-left:7px; background:#eee">
        <tr>
          <td><table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="mb">Item Features</td>
            </tr>
            <tr>
              <td><?php
			$max_per_col  = 15;
			$current_type = "";
			$feature_num  = 0;
			$tr_num			  = 0;

			echo '<table border="0" cellspacing="0" cellpadding="0" align="left" class="features" >';

while ($row = mysql_fetch_assoc($rsAllFeatures)) {

  //If new type show new type header
  if ($current_type != $row['Type']) 
{	
    //If not first type close previous type
    if ($current_type != "") 
	{
      $pad = $max_per_col - $feature_num;
		for($t=0;$t<=$pad;$t++)
		{
		  echo "\n\t<tr><td> </td></tr>";
		} 
		echo "\n\t</table><table border='0' cellspacing='0' cellpadding='0' align='left' class='features'>\n";
    $feature_num = 0;
    }

    $current_type = $row['Type'];
    echo "\n\t<tr><td class='sb' width='124' >$current_type:</td></tr>\n";

  }

echo "<tr><td style=\"font-size:9px\" width='124' ><input onClick=\"changeColor(this.id, '#009900');\" type=\"checkbox\" name=\"FeatureId[]\" id=\"FeatureId$row[FeatureId]\" value=\"$row[FeatureId]\"";
					foreach($ItemsFeatures as $FeatureId){
						if($FeatureId==$row['FeatureId'])
							echo "checked";
					}
				echo ">";
echo "<label id=\"LabelFeatureId".$row['FeatureId']."\" for=\"FeatureId".$row['FeatureId']."\">".$row['Name']."</label></td></tr>\n";
  $feature_num++;

  //If the 15th item close td and start new one
  if ($feature_num >= $max_per_col) {
	echo "</table><table border='0' cellspacing='0' cellpadding='0' align='left' class='features'>\n";//"</td><td>\n";
	echo "\t<tr><td> </td></tr>\n";
    $feature_num = 0;
  }

}

echo "</td></tr></table>\n";?></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td>
	  </td>
        </tr>
      </table>

[lemmin]

Could you post screen shots of the two situations? By default, IE shouldn't allow tables to display side-by-side.

[samoht]

here are the screen shots -

 

unfortunately the whole screen does not fit, but I think you can see what is happening

[lemmin]

I didn't know Firefox automatically repositioned cells like that. I don't think there is any possible way of making IE do a similar thing the way your table works. IE uses strictly rows and columns, so when you add a column (<td>), even if you check the size of the page, you can't send that column somewhere else without making a new row. You are going to have to use a different method.

 

You might want to make a separate table for each group and use some relative positioning to get them where you want.

[samoht]

I was afraid that might be the case

 

any ideas on getting a div to have the same height even with more/less info?

 

I suppose I could use a <br /> similar to the way I used <td> </td> ??

[lemmin]

You could get divs you work, but you would need to check for a maximum number of columns. I would use one big div for the first block of content. Inside that div would be a div for each column; these divs would need to have inline positioning set. Then, once it gets to wide, make another big div block to put more columns in and they will go underneath the other block. The heights should set themself dynamically.

[samoht]

well, I changed the tables to div's and floated them left - and that works pretty well.

 

But I would like to have the checkboxes and the empty lines the same width and height. Do I need to display:block and set the width and height of a <p> then in the blank lines throw in a <p> </p>

??

[lemmin]

With the divs, you shouldn't need any blank lines. I'm not sure I understand how that would change the format. Could you post another screenshot of the eidth and heights not matching?