cell changes height although set to fixed height

jualgi · 11-18-2008, 02:59 AM

hey everyone.
i have a table with 3 columns, 2 rows. now i want the 2 outer colums of the 1st row to have a set height (for a colour-flow-background) and the outer colums of the 2nd row to automatically adjust to the content height of the middle column/cell.

here is the code:

Code:

<table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="465" background="layout/bg.gif"></td>
    <td></td>
    <td width="200" height="465" background="layout/bg.gif"></td>
  </tr>
  <tr>
    <td width="200" bgcolor="#5D7B98"></td>
    <td></td>
    <td width="200" bgcolor="#5D7B98"></td>
  </tr>
</table>

so when i enter content of more than 465px in the middle column, i want the outer upper cells to remain at 465px and the outer lower cells to make up for the rest of the page. but what happens is that the cell that i set to 465 stretches in length and repeats its [1px x 465px] backgroundpicture (which then of course looks all messy).

any simple suggestions? i tried embedding another table into the cell - then i tried the background:repeat tag and some other stuff - unsuccessful.

please help! thx!

Geodun1 · 11-18-2008, 03:19 AM

I think the issue lies in your height: 100%; setting for the tables overall style, but I'm not sure how that would affect the fixed height of an individual cell. Do you have an example page I can see?

EDIT: Also, try adding a div within the cell and putting the height/width settings on the div instead. See how that affects it.

zkiller · 11-18-2008, 05:25 AM

Could you give a example link please. Would make understanding your intent much easier.

Basically, the first problem that I see is that the center column can't have a different height than the outer columns. They are on the same row and must have the same height. The only way to avoid this is to span the center column across two rows, which would keep the top outer columns at the set height, regardless of how much content is entered in the center column.

Code:

<table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200" height="465" background="layout/bg.gif"></td>
    <td rowspan="2">Content here.</td>
    <td width="200" height="465" background="layout/bg.gif"></td>
  </tr>
  <tr>
    <td width="200" bgcolor="#5D7B98"></td>
    <td width="200" bgcolor="#5D7B98"></td>
  </tr>
</table>

Hope that helps.

jualgi · 11-18-2008, 02:56 PM

hey again. thx for the reply!

@geodun: i have tried adding divs with heights to the cells before, but unfortunately that didnt help either...

@zkiller: i thought that would have fixed the problem, but if you exceed the content height of 200px in your code, the first row

Code:

<tr>
    <td width="200" height="465" background="layout/bg.gif"></td>
    <td></td>
    <td width="200" height="465" background="layout/bg.gif"></td>
  </tr>

will stretch and repeat its backgroundpicture, but the goal is to repeat the second row

Code:

<tr>
    <td width="200" bgcolor="#5D7B98"></td>
    <td width="200" bgcolor="#5D7B98"></td>
 </tr>

i tried modifying the table so that the content cell lies within the second row, but that is shown even worse

like that:

Code:

<table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="43" height="200" background="layout/framelef.gif"></td>
    <td width="47" height="200" background="layout/framerig.gif"></td>
  </tr>
  <tr>
    <td width="43" background="layout/bglef.gif"></td>
    <td rowspan="2"></td>
    <td width="47" background="layout/bgrig.gif"></td>
  </tr>
</table>

anyway - it might be a bit messy, but have a look on www.team-schwimmen.de/try2.html. i have the problem with 4 cells there, as you might see its the wrong cell with its background repeating.
if you have a quicker and easier way to get the tablework done, so i can save it as a template and just work on the contentcell every time - i would send a turkey for thanksgiving

i just tried to make a huge table with 10 rows and columns and work from the inside outwards, but no chance. at least for me. so yeah - im still stuck

jualgi · 11-18-2008, 06:42 PM

hey guys. i found an easy solution. i just added another table in the cell. you then take a bg picture and set it for the table and then another bg picture for the cell. works great! thx anyway!

tsm1248 · 11-19-2008, 01:40 AM

NO Tabels! ahh unless its for a chart then by all means go ahead

zkiller · 11-19-2008, 07:02 AM

I haven't used tables in ages, so I tested it to ensure I am not losing my mind. This works...

Code:

<table width="100%" height="100%"  border="0">
  <tr>
    <td width="200" height="465" bgcolor="#FF0000">&nbsp;</td>
    <td height="465" rowspan="2" valign="top">&nbsp;</td>
    <td width="200" height="465" bgcolor="#FF0000">&nbsp;</td>
  </tr>
  <tr>
    <td width="200" bgcolor="#00FFFF">&nbsp;</td>
    <td width="200" bgcolor="#00FFFF">&nbsp;</td>
  </tr>
</table>

Good luck!

11-18-2008, 02:59 AM	#1
jualgi New Member Join Date: Nov 2008 Location: Naples, Florida Posts: 6	cell changes height although set to fixed height hey everyone. i have a table with 3 columns, 2 rows. now i want the 2 outer colums of the 1st row to have a set height (for a colour-flow-background) and the outer colums of the 2nd row to automatically adjust to the content height of the middle column/cell. here is the code: Code: <table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="465" background="layout/bg.gif"></td> <td></td> <td width="200" height="465" background="layout/bg.gif"></td> </tr> <tr> <td width="200" bgcolor="#5D7B98"></td> <td></td> <td width="200" bgcolor="#5D7B98"></td> </tr> </table> so when i enter content of more than 465px in the middle column, i want the outer upper cells to remain at 465px and the outer lower cells to make up for the rest of the page. but what happens is that the cell that i set to 465 stretches in length and repeats its [1px x 465px] backgroundpicture (which then of course looks all messy). any simple suggestions? i tried embedding another table into the cell - then i tried the background:repeat tag and some other stuff - unsuccessful. please help! thx!

11-18-2008, 03:19 AM	#2
Geodun1 Silver Member Join Date: Nov 2008 Location: New Mexico Posts: 145	I think the issue lies in your height: 100%; setting for the tables overall style, but I'm not sure how that would affect the fixed height of an individual cell. Do you have an example page I can see? EDIT: Also, try adding a div within the cell and putting the height/width settings on the div instead. See how that affects it. __________________ My Personal Blog http://img.photobucket.com/albums/v2...DD-B11copy.jpg

11-18-2008, 05:25 AM	#3
zkiller Super Noob Join Date: Aug 2004 Location: position:relative Posts: 1,640	Could you give a example link please. Would make understanding your intent much easier. Basically, the first problem that I see is that the center column can't have a different height than the outer columns. They are on the same row and must have the same height. The only way to avoid this is to span the center column across two rows, which would keep the top outer columns at the set height, regardless of how much content is entered in the center column. Code: <table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200" height="465" background="layout/bg.gif"></td> <td rowspan="2">Content here.</td> <td width="200" height="465" background="layout/bg.gif"></td> </tr> <tr> <td width="200" bgcolor="#5D7B98"></td> <td width="200" bgcolor="#5D7B98"></td> </tr> </table> Hope that helps. __________________ Stefan, the Post Master Track Devil - May the boost be with you! Last edited by zkiller; 11-18-2008 at 05:28 AM.

11-18-2008, 02:56 PM	#4
jualgi New Member Join Date: Nov 2008 Location: Naples, Florida Posts: 6	hey again. thx for the reply! @geodun: i have tried adding divs with heights to the cells before, but unfortunately that didnt help either... @zkiller: i thought that would have fixed the problem, but if you exceed the content height of 200px in your code, the first row Code: <tr> <td width="200" height="465" background="layout/bg.gif"></td> <td></td> <td width="200" height="465" background="layout/bg.gif"></td> </tr> will stretch and repeat its backgroundpicture, but the goal is to repeat the second row Code: <tr> <td width="200" bgcolor="#5D7B98"></td> <td width="200" bgcolor="#5D7B98"></td> </tr> i tried modifying the table so that the content cell lies within the second row, but that is shown even worse like that: Code: <table width="100%" style="height: 100%;" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="43" height="200" background="layout/framelef.gif"></td> <td width="47" height="200" background="layout/framerig.gif"></td> </tr> <tr> <td width="43" background="layout/bglef.gif"></td> <td rowspan="2"></td> <td width="47" background="layout/bgrig.gif"></td> </tr> </table> anyway - it might be a bit messy, but have a look on www.team-schwimmen.de/try2.html. i have the problem with 4 cells there, as you might see its the wrong cell with its background repeating. if you have a quicker and easier way to get the tablework done, so i can save it as a template and just work on the contentcell every time - i would send a turkey for thanksgiving i just tried to make a huge table with 10 rows and columns and work from the inside outwards, but no chance. at least for me. so yeah - im still stuck

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

11-18-2008, 06:42 PM	#5
jualgi New Member Join Date: Nov 2008 Location: Naples, Florida Posts: 6	hey guys. i found an easy solution. i just added another table in the cell. you then take a bg picture and set it for the table and then another bg picture for the cell. works great! thx anyway! Last edited by jualgi; 11-18-2008 at 06:51 PM.

11-19-2008, 01:40 AM	#6
tsm1248 Bronze Member Join Date: Sep 2008 Posts: 25	NO Tabels! ahh unless its for a chart then by all means go ahead