Quick: Silly HTML problem needs solving.

[iwantchixx]

I'll try to explain this the best I can.

In this example of code We have two rows in the second column:

<table width="500">
	<tr>
		<td rowspan="2">1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
	</tr>
</table>

How do I keep the top of the 3rd cell snug under the content contained withing the 2nd cell when the content of cell 2 is stretched beyond the height of cells 2 and 3 combined?

I have to do this without setting cell heights. My page code on the project I am working on is much more complex than thios but this is the easiest way to get my question across.

Thanks muchly!

[VIPimp]

td valign="top" in the 3rd?

[CamsLord]

wat he said

[iwantchixx]

I use that to align the content of the 3rd cell to the top of the 3rd cell. it doesnt seem to push the top of the 3rd cell snug against the bottom of the 2nd cell's content

[VIPimp]

Originally Posted by iwantchixx

I use that to align the content of the 3rd cell to the top of the 3rd cell. it doesnt seem to push the top of the 3rd cell snug against the bottom of the 2nd cell's content

how about adding cellspacing tag?

table width="500" cellspacing="0"

or

table width="500" cellspacing="0" cellpadding="0" border="0"

[iwantchixx]

nope, that just makes the gap between cells dissapear.

I'm looking into seeing if CSS can solve this but I don't see anything that would work.

[viki]

I think I see what you're saying. When cell 1 has lengthy content, it splits up the height of cells 2 and 3 and half causing a gap. If that's correct, would removing cell 3 entirely and putting a table within cell 2 work? It would look like this:

<table>
<tr><td>1</td>
<td>
content of cell 2

<table><tr><td>table replacing cell 3</td></tr></table>

</td></tr></table>

[iwantchixx]

that MIGHT work, I'll try it.

The cell is colored with no padding or spacing atributes on that table so I dont know if it will lign up right.

[ssp]

First of all, your code is wrong.

The bottom row spans over two columns so it should be like this.

<table width="500">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td colspan="2">3</td>
	</tr>
</table>

Second... try picking up an HTML manual somewhere? Christ, you've been posting since 2002?!

[ssp]

PS.. I just read your post again, it's 7am here so if I misunderstood, my apologies in advance.

[viki]

Originally Posted by iwantchixx

that MIGHT work, I'll try it.

The cell is colored with no padding or spacing atributes on that table so I dont know if it will lign up right.

If you're worried about the small gap that the inner table would make on the left and the right sides, here's what you can do for that inner table:

<table>
<tr><td>1</td>
<td>
content of cell 2

<table CLASS=WHATEVER><tr><td>table replacing cell 3</td></tr></table>

</td></tr></table>

<style>
table.whatever {margin-left: 0px; margin-right: 0px;}
</style>

Sorry if I'm horribly misunderstanding all of this but in my head it should work.

[iwantchixx]

Thank you very much. While using that method and using cellspacing/padding I was able to make it fit and work for the tast at hand.

[iwantchixx]

Originally Posted by ssp

First of all, your code is wrong.

The bottom row spans over two columns so it should be like this.

<table width="500">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td colspan="2">3</td>
	</tr>
</table>

Second... try picking up an HTML manual somewhere? Christ, you've been posting since 2002?!

ahaha. Maybe YOU should pick up an HTML manual. You should read fully before you leave assenine comments.

no. There is NO bottom row.

it was a Left colum with a right colum. The right colum was split into two rows.



I was trying to keep the code as clean as possible without doubling up on tables but using a second table was the only solution.

Does that me me HTMl illiterate?

[iwantchixx]

Originally Posted by viki

If you're worried about the small gap that the inner table would make on the left and the right sides, here's what you can do for that inner table:

<table>
<tr><td>1</td>
<td>
content of cell 2

<table CLASS=WHATEVER><tr><td>table replacing cell 3</td></tr></table>

</td></tr></table>

<style>
table.whatever {margin-left: 0px; margin-right: 0px;}
</style>

Sorry if I'm horribly misunderstanding all of this but in my head it should work.

yeah I was using CSS to begin with, had everything streamlined.. No tables at all. then realized the CSS attributes are not cross-browser compatible. Firefox REALLY fucked it up badly. It was the ordering of classes in the style sheet. One browser wants it one way, the other the other way..

Such a shame too.. my code was so damn minimal!

[iwantchixx]

Originally Posted by ssp

PS.. I just read your post again, it's 7am here so if I misunderstood, my apologies in advance.

appologies accepted.

I was wracking my brain trying to figure out why you were being assenine, but I think I understand why you misunderstood.

So appologies back at ya!

[iwantchixx]

Ah fuck sakes.

Ok, it's all looking good, but in fuckfox it doesnt allow the table replacing cell 3 to stretch the entire length of cell 2 like I wanted it to even with height="100%" on the replacement table as all as the cell in the replacement table.. IE looks perfect.

[Nookster]

My recommendation: Learn how to properly use span and div tags and drop your table usage alltogether.

[iwantchixx]

GOT IT!

Stupid me forgot to remove a tag.

[iwantchixx]

Originally Posted by Nookster

My recommendation: Learn how to properly use span and div tags and drop your table usage alltogether.

That's my eventual goal.

Unfortunately Opera and Firefox ignore a lot of div alignment specifications when used with classes.

I have to learn a proper workaround.

been reading up a lot on it, also considering purchasing a CSS guide book.

[Bro Media - BANNED FOR LIFE]

Originally Posted by iwantchixx

That's my eventual goal.

Unfortunately Opera and Firefox ignore a lot of div alignment specifications when used with classes.

I have to learn a proper workaround.

been reading up a lot on it, also considering purchasing a CSS guide book.

firefox and opera render to compliance, ie doesn't so if it doesn't work in ff or opera, then your code is shit