HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
TD Height Not staying true...
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table
View previous topic :: View next topic  
Author Message
DunnDiego



Joined: 30 Apr 2008
Posts: 2

PostPosted: Wed Apr 30, 2008 9:42 am     TD Height Not staying true... Reply with quote

I've been searching these forums for a few days, and have not found my answer, so forgive me if this has been answered before!

I have a table with a column of images on the left, and an area for text on the right. Sometimes the text expands below the image, and it makes the images spread out to match the height of the text cell.

I want the button images to stay on the top like this:
http://forreverie.com/test/test1.htm

But they spread out like this when more text is added:
http://forreverie.com/test/test2.htm

Here is the code:
Code:
<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>
 <TR>
    <TD align="left" width="300" valign="top" height="87"> <img src="images/1.gif" width="272" height="87"></TD>
    <TD rowspan="7" align="left" valign="top" height="100%">
      <p><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>Not a
        lot of text.</b></font></p>

      <p>&nbsp;</p>
      <p><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Buttons
        stay together.</font></b></p>
      </TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="87"> <img src="images/2.gif" width="272" height="87"></TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="87"> <img src="images/3.gif" width="272" height="87"></TD>

  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="87"> <img src="images/4.gif" width="272" height="87"></TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="87"> <img src="images/5.gif" width="272" height="87"></TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="87">
      <p><img src="images/6.gif" width="272" height="87"></p>

      </TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top" height="100%"><img src="art/space.gif" width="20" height="20"></TD>
  </TR>
  <TR>
    <TD align="left" width="300" valign="top"> <IMG SRC="images/TLI_15.gif" WIDTH=246 HEIGHT=17></TD>
    <TD align="left"> <IMG SRC="images/TLI_16.gif" WIDTH=654 HEIGHT=17></TD>

  </TR>
</TABLE>


Thanks in advance!
Corey Bryant



Joined: 15 May 2004
Posts: 8154
Location: Castle Rock CO USA

PostPosted: Wed Apr 30, 2008 12:23 pm     Reply with quote

I would consider putting the text in a separate <td>
Code:
<table style="width: 100%">
   <tr>
      <td style="width: 275px" valign="top"> <img src="images/1.gif" width="272" height="87"><img src="images/2.gif" width="272" height="87"><img src="images/3.gif" width="272" height="87"><img src="images/4.gif" width="272" height="87"><img src="images/5.gif" width="272" height="87"><img src="images/6.gif" width="272" height="87"></td>
      <td valign="top">Lorem Ipsum</td>
   </tr>
</table>
I am not certain why the colspan is in there unless there is more, but keep it simple when it comes to tables.

_________________
Corey
Payment Processing Forums | Mile High Merchant Accounts | Microsoft Expression Web Blog
DunnDiego



Joined: 30 Apr 2008
Posts: 2

PostPosted: Wed Apr 30, 2008 8:37 pm     Reply with quote

"keep it simple", perfect!

That seems to have done it, thanks!
I'm trying to perfect my markup skills and move away from the WYSIWYG.

Thanks again!
Straystudio



Joined: 14 Apr 2008
Posts: 182
Location: Nord Italy

PostPosted: Wed Apr 30, 2008 10:59 pm     Reply with quote

To keep it as less simple ...
Code:

<TABLE WIDTH="100%" BORDER="1" CELLPADDING="0" CELLSPACING="0">
 <TR>
  <TD align="left" valign="top">

  <TABLE WIDTH="300" BORDER="1" CELLPADDING="0" CELLSPACING="0">
   <TR>
    <TD align="left" valign="top" height="87"><img src="images/1.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="87"><img src="images/2.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="87"><img src="images/3.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="87"><img src="images/4.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="87"><img src="images/5.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="87"><img src="images/6.gif" width="272" height="87"></TD>
    </TR>
    <TR>
    <TD align="left" valign="top" height="100%"><img src="art/space.gif" width="20" height="20"></TD>
   </TR>
  </TABLE>

  </TD>
  <TD align="left" valign="top" height="100%">
      <font face="Verdana, Arial, Helvetica, sans-serif" size="2"><p><b>
        Here to fill with text ...<br>
        Here to fill with text ...<br>
        Here to fill with text ...<br></b></p>
      </font>
  </TD>
  </TR>
  <TR>
  <TD align="left" width="300" valign="top"><IMG SRC="images/TLI_15.gif" WIDTH="246" HEIGHT="17"></TD>
  <TD align="left"><IMG SRC="images/TLI_16.gif" WIDTH="654" HEIGHT="17"></TD>
  </TR>
</TABLE>
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Table All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial