Jump to content

Table Heights


StevenAFC

Recommended Posts

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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

<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>

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

	<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 =(

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.