Extra space after a form in a table

[Jeff122185]

I'm using a form in a table, and for some reason after the form it leaves extra space that I would like to get rid of. You can see the table on the right, below the form buttons at http://jeff122185.tripod.com/imcm/test.html . Thanks for any help.

Here is the code for the entire table (in a nested table):

<table cellspacing="0" cellpadding="0" width="125" bordercolor="#003060" border="1">
<tr><td width="125" bgcolor="#003060">
<b><font face="tahoma,verdana,arial,helvetica" color="#FFFFFF" size="1">&nbsp;Guestbook</font></b></td>
</tr>
<tr>
<td width="125" bgcolor="#EFEFEF" height="1">
<table cellspacing="0" cellpadding="3" width="125" align="center">
<tr>
<td valign=top width="125">
<font face="arial" size="1">
<script language="javascript" src="http://www.tenshimedia.com/qboard/?view=3d2c2b2e5d2e&js=true&filter=&lines=3"></script>
<FORM action="http://www.tenshimedia.com/qboard/?view=3d2c2b2e5d2e" method=post name=qtag onSubmit="document.qtag.msg1.value='';">
<INPUT TYPE=hidden VALUE=3d2c2b2e5d2e NAME=post>
Name<br>
<INPUT MAXLENGTH=16 NAME=name size=19 CLASS="input"><br>
E-mail/URL<br>
<input MAXLENGTH=40 type=text size=19 name=url class="input"><br>
<input type=hidden name=js value=true>
Message<br>
<TEXTAREA NAME=msg1 ROWS=5 COLS=20 CLASS="input"></TEXTAREA><INPUT TYPE=hidden NAME=msg>
<INPUT TYPE="submit" NAME="postit" VALUE="sign" CLASS="button" onClick="qtag.msg.value=qtag.msg1.value;"> <INPUT TYPE="reset" NAME="clear" VALUE="clear" CLASS="button"></form></font>
</td>
</tr>
</table>
</td>
</tr>
</table>

[justame]

jef...
just a checkout® this link for some just a different® ideas...
http://www.cs.tut.fi/~jkorpela/forms/extraspace.html

one of 'em is this one...
"quote...It is sometimes suggested e.g. that the end tag </form> be moved outside the table cell even if the start tag <form> is inside
the cell. This might make some browsers leave the extra space after the table, not inside a cell...endquote"

[Jeff122185]

It worked! Thanks a lot!

[Roy Sinclair]

If you move the </form> tag outside the table you should also move the <form> tag outside as well. It's not valid html to place tags out of order and browsers may have trouble with such.

[joh6nn]

i was gonna say the same thing, but is it valid html to have things inside a table row, that aren't table cells? i've never seen that done.

[Roy Sinclair]

Originally posted by joh6nn
i was gonna say the same thing, but is it valid html to have things inside a table row, that aren't table cells? i've never seen that done.

No, inside a table row you should have table cells, either <td></td> or <th></th>. It's fine to have other html inside the cell. As a part of developing a web page it should be fed into a html validator (HTML Tidy being the best one I know of) to find HTML errors so you can correct them.

[joh6nn]

i think you missed it, Roy. the article justame found, suggested that the </form> tag be moved outside the cell, not the table. i didn't think that was valid, but i wasn't sure. the trouble is that if you try to put a table inside a form, netscape won't accept it, for whatever reason. i had to solve the problem by making multiple forms, and putting the various forms inside the different table cells. it's a bad and sloppy solution, and so i was hoping someone would come up with a better answer here.

[Gordo]

If the designer wants the get rid of the extra space at the end of a form, then the only solution I've ever seen work is joh6nn's. joh6nn and others helped me sometime back with the same problem. Sloppy and/or with multiple forms, but it works...and nothing else did!

Here's my generic code -- and it works in IE6, N4.79, and N6:

<table border="0" cellspacing="0" cellpadding="0">
<form onSubmit="urlBox(this);">
<tr>
<td>
<input type=text name=url size=16>
</td>
</tr>
</form>
<form>
<tr>
<td>
<select onChange="if(this.value){window.open(this.options[this.selectedIndex].value,'_blank')}">
<option selected="selected">Where go?</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.hotmail.com">Hotmail</option>
<option value="http://www.codingforums.com/">CodingForums</option>
<option value="http://www.the-pit.net/cgi-bin/ultimatebb.cgi">The Pit</option>
<option value="http://www.google.com/advanced_search?safe=images&as_occt=any&as_dt=i&as_qdr=all&lr=lang_en&num=30&hl=en">Google</option>
<option value="http://www.time.gov">What Time Is It?</option>
</select>
</td>
</tr>
</form>
<form name="Keypad" action="">
<tr>
<td>
<table border="0" cellspacing="0" bgcolor="#C7C19A">
<tr>
<td colspan="5" valign="middle" align="center"><input name="ReadOut" size=15 value="0" style="color:#0039A5; font-family:verdana; font-size:12; font-weight:bold; border-style:solid; border-width:1; text-align:right; background-color:#E4E2CD"></td>
</tr>
<tr>
<td valign="middle" align="center"><input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #E4E2CD"></td>
<td valign="middle" align="center"><input name="btnClearEntry" type="Button" value="CE" onclick="ClearEntry()" style="font-size: 8pt; border-style=solid; border-width=1; color: #DEE7FF; font-family: verdana; background-color: #0039A5"></td>
</tr>
<tr>
<td valign="middle" align="center"><input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #E4E2CD"></td>
<td valign="middle" align="center"><input name="btnClear" type="Button" value=" C " onclick="Clear()" style="font-size: 8pt; border-style=solid; border-width=1; color: #DEE7FF; font-family: verdana; background-color: #0039A5"></td>
</tr>
<tr>
<td valign="middle" align="center"><input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #E4E2CD"></td>
<td valign="middle" align="center"><input name="btnPercent" type="Button" value=" %" onclick="Percent()" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #C7C19A"></td>
</tr>
<tr>
<td valign="middle" align="center"><input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnNeg" type="Button" value="+/-" onclick="Neg()" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnDecimal" type="Button" value=" . " onclick="Decimal()" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #DEE7FF"></td>
<td valign="middle" align="center"><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #E4E2CD"></td>
<td valign="middle" align="center"><input name="btnEquals" type="Button" value=" = " onclick="Operation('=')" style="font-size: 8pt; border-style=solid; border-width=1; color: #0039A5; font-family: verdana; background-color: #C8F2F8"></td>
</tr>
</table>
</td>
</tr>
</form>
</table>

[joh6nn]

well, Gordo, i may have been in on the discussion, but i know i didn't come up with that answer. i was actually just saying here that i don't like that answer too much, though the one i use isn't much better. i'm curious to know if your way of doing it works in Mozilla and Netscape, though. i can imagine that working in Explorer, but i would have thought that Netscape would choke on it.

[Pooh]

<FORM style="display:inline"

[MCookie]

<form style="margin:0px;" ..

[justame]

joh...
just a ccckkk®.../me took that to mean to put the '</form>' OUTSIDE the last </table> tag...nottt like you mentioned it just a ppears® to be just a fter® the </td> one...
/me just a grees® with joh...things dont belong between </tr> NOT IN HERE<tr>

[brothercake]

I always use Gordo's method, and it's never ever let me down on any browser or platform

[Gordo]

Yeah, I tested the code (see last post by me) in IE, N4.79, N6, Mozilla, and Opera6. Works just fine.

[applesauce]

hey gordo- where in texas are you? i'm in dallas

[joh6nn]

well, i'm surprised that it works, but more than that, i'm pleased that it works. i'm not nearly as concerned with whether code validates, as i am with whether it gets the job done. thanks for tip, Gordo. i will also report back later, with any success i have styling the form, though i suspect that styling the form will have no effect in NS4

[Pooh]

Styling for NN4 with display:inline probably won't work and margin will be buggy. But it's time to put this turd of a browser to rest. What are there about 2.5% of Birkenstock wearing, banana peel smoking tofu twink bed-wetters still using the browser? And about 10 percent that have scripting turned off. You make your choice breathren. It should have never been browser-welfared along in the first place.