Table Heights

StevenAFC · November 28, 2007

I have no patience when it comes to designing websites for this exact reason, Firefox displays my table perfectly, and IE displays it wrong. Only its impossible to fix because Dreamweaver and firefox display things the same, and IE is out there on its own!

Anyway!

Basically I have a table that looks like this....

_________________

| | |

| | B |

| A |_____|

| | C |

|_________|_____|

I hope that displays OK, basically one big cell on the left, with two rows split on the right.

C has to be X high to display correctly, B has to be flexible because the height of A is not set. So in code ive not explicitly stated a height for B, but I have explicitly stated a height for C.

In mozilla this displays fine, but in internet explorer the B's height is completely dependent on its content. But because its height cant be set, I cant explicitly say B = 10, I cant say B=100% because then it tries to be the same height as A and messes up Firefox and IE.

How can I get around this?

Yesideez · November 28, 2007

Can you show some code? Like how have you defined the table height? Have you used CSS or defining it using HTML's "height" tag?

I've tried this in both IE and FF and both give a constant height for C:

<html>
<body>
  <table width="500" border="1">
    <tr>
      <td rowspan="2" width="250">A</td>
      <td width="250">B</td>
    </tr>
    <tr>
      <td style="height: 100">C</td>
    </tr>
  </table>
</body>
</html>

If the line defining the C cell is changed to this it still works fine in IE and FF:

<td height="100">C</td>

StevenAFC · November 28, 2007

<table width='100%' border='0' cellspacing='0' cellpadding='0'>
  <?php
			while ($row = $db->createRowObject($criticReviews)) {
  				?>
        <tr>
          <td style='padding-left: 5px;'><br />
            <?php
               		echo("<a href='../publication/reviewers.php?reviewerID=".$row->reviewerID."'>".$row->reviewer."</a>");
				echo(" : <a href='../publication/profile.php?id=".$row->publicationID."'>".$row->publication."</a><br /><br />");
               ?>          </td>
      </tr>
        <tr>
          <td width='88%' rowspan="2"  style='border-bottom: 1px solid #6DB09D; padding: 5px;'><p><?php echo("$row->review"); ?></p></td>
          <td width='10%'>
          <br />
      </tr>
        <tr>
          <td height="45" width='10%' align="center" style='border-bottom: 1px solid #6DB09D; background-color:#6DB09D'>          
  <?php
					if($row->rating < 0) { $rating = "0"; } else { $rating = $row->rating; } 
                        echo("<img src='../../inc/img/numbers/".$rating.".gif'/>");
          ?>      
      </tr>
        <tr>        </tr>
<?php
			}
?>
      </table>

Yesideez · November 28, 2007

I can't see anything wrong with that except try and keep to using double quotes instead of single quotes.

You can try changing that and see if it makes any difference but I doubt it.

Also, try removing this line:

        <tr>        </tr>

It isn't doing anything...

StevenAFC · November 28, 2007

	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <?php
			while ($row = $db->createRowObject($criticReviews)) {
  				?>
        <tr>
          <td style="padding-left: 5px;"><br />
            <?php
               		echo("<a href='../publication/reviewers.php?reviewerID=".$row->reviewerID."'>".$row->reviewer."</a>");
				echo(" : <a href='../publication/profile.php?id=".$row->publicationID."'>".$row->publication."</a><br /><br />");
               ?>          </td>
      </tr>
        <tr>
          <td width="88%" rowspan="2"  style="border-bottom: 1px solid #6DB09D; padding: 5px;"><p><?php echo("$row->review"); ?></p></td>
          <td width="10%">
          <br />
      </tr>
        <tr>
          <td height="45" width="10%" align="center" style="border-bottom: 1px solid #6DB09D; background-color:#6DB09D">          
  <?php
					if($row->rating < 0) { $rating = "0"; } else { $rating = $row->rating; } 
                        echo("<img src='../../inc/img/numbers/".$rating.".gif'/>");
          ?>      
      </tr>
<?php
			}
?>
      </table>

Thanks for your help, but still no change =(

Yesideez · November 28, 2007

Can you post a link to the page or are you running this on your PC and not online?

StevenAFC · November 28, 2007

Its on a local host , Its ok Im going to attempt a slightly different method, ive been playing with this all day, and im about to chuck the computer through the windows, then go round bill gates house and smash him in the face with the biggest shard of glass i can find from my broken window, and then tell him to make IE behave.

Thanks for your time.

Yesideez · November 28, 2007

I love your way of thinking

I'm going to copy and paste your code into my editor, remove the PHP and see what I can make of it. In the meantime, what version of IE are you using? I'm using v6 (for testing) as I hate the new look to IE7 but use FF as default.

dbrimlow · November 28, 2007

I see by this - >>br /<< - that you are using an xhtml doctype.

Basically, this is invalid code >>width='100%' border='0' cellspacing='0' cellpadding='0'<<

as is this:

>>td height="45" width="10%" align="center"<<

Styling needs to be done via css. Until your code is valid, IE will render it in quirks mode and there is no telling how it will respond to any styling elements.

Validate your local html and fix the errors. Then you will have hope of making IE behave.

Yesideez · November 28, 2007

While formatting (tabulating) the code to make it more readable I've discovered that you've missed off two terminating TDs

One has been missed off after the line displaying the IMG, the first is missing from the line containing only the line break with a width of 10%. Here's it fixed minus the PHP:

<html>
<body>
<table width='100%' border='1' cellspacing='0' cellpadding='0'>
  <tr>
    <td style='padding-left: 5px;'>
      <br />
      <a href='../publication/reviewers.php?reviewerID=".$row->reviewerID."'>test</a> : <a href='../publication/profile.php?id=".$row->publicationID."'>MOO</a><br /><br />
    </td>
  </tr>
  <tr>
    <td width='88%' rowspan="2"  style='border-bottom: 1px solid #6DB09D; padding: 5px;'>
      <p>REVIEW</p>
    </td>
    <td width='10%'>
      <br />
    </td>
  </tr>
  <tr>
    <td height="45" width='10%' align="center" style='border-bottom: 1px solid #6DB09D; background-color:#6DB09D'>
      <img src='../../inc/img/numbers/".$rating.".gif'/>
    </td>
  </tr>
</table>
</body>
</html>

EDIT: I haven't corrected any of the quotes - everything was copied from your original post.

danlindley · November 30, 2007

I dont know if this is much help to you at this stage but i would have used more than one table....

Table A would have cells and B, which would be basically two columns 1 and 2

Table B would be inside cell A2 and consist of two rows. 3 and 4

Row 3 in table B would be set to size "100%"

Row 4 in table B would be set to size 250px

This would give me a cell of 250% at the bottom right, te one above it would stretc according to the content in cell A1.. code would be something like...

<table> <TR><TD> Cell A </td>

<TD> <Table><TR><TD height="100%"> CEll B </td></tr>

<TR><TD height="250px"> Cell C </td></tr></table>

</td></tr>

</table>

dan

Sign In

Table Heights

Recommended Posts

StevenAFC

Link to comment

Share on other sites

Yesideez

Link to comment

Share on other sites

StevenAFC

Link to comment

Share on other sites

Yesideez

Link to comment

Share on other sites

StevenAFC

Link to comment

Share on other sites

Yesideez

Link to comment

Share on other sites

StevenAFC

Link to comment

Share on other sites

Yesideez

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Yesideez

Link to comment

Share on other sites

danlindley

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information