Forum Moderators: open

Message Too Old, No Replies

Form adds another line

         

tesla

10:57 pm on Jun 22, 2002 (gmt 0)

10+ Year Member



I found that when using forms, the form element adds another blank line below the form. For example, the code below results in a button in a double high row. If I distort the keyword "form" to say, "xorm", the blank row/space disappears. What's causing this? Any idea how to stop this from happening?

<table border="1" width="200"><TR>
<TD><form method="POST" action="url" name=f1>
<input type="hidden" name="stuff" value="1">
<input type="submit" name="var" value="press"></form></td></TR></Table>

Thanks, Bruce

papabaer

11:09 pm on Jun 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Bruce, try using CSS control:

In your style sheet:

form {
display:inline;
}

By default many browsers render a blank line after a form input element.

tesla

11:16 pm on Jun 22, 2002 (gmt 0)

10+ Year Member



I have run into this problem before, and I managed to fake it out some how so that the blank line did not appear. The problem is that I can't seem to reproduce the fix. As I recall it was something to do with moving the form keywords or it was something about nesting it in tables.

Hmm, I will keep experimenting, but if someone knows the answer, please let me know

papabaer

11:25 pm on Jun 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<table border="1" width="200"><TR>
<TD><form method="POST" action="url" name=f1 style="display:inline;">
<input type="hidden" name="stuff" value="1">
<input type="submit" name="var" value="press"></form></td></TR></Table>

Try it... ;)

Key_Master

11:49 pm on Jun 22, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>>the code below results in a button in a double high row.

This will happen if you use <form></form> within a table (which doesn't validate anyhow). Try it this way instead.

<form method="POST" action="url" name=f1>
<table border="1" width="200"><TR>
<TD><input type="hidden" name="stuff" value="1">
<input type="submit" name="var" value="press"></td></TR></Table></form>

tesla

2:15 am on Jun 23, 2002 (gmt 0)

10+ Year Member



Both Of the above methods work!

Thanks!

tedster

5:22 am on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>> <form></form> within a table (which doesn't validate anyhow)

I'd like to explore this a bit more. My understanding is that a form CAN be valid if it's contained within a single table cell

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

What is invalid is code where the form tag is inside the <table> but outside the <tr> or <td>, like this:

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

or this:

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

I know this is true for transitional HTML 4. Is it different in strict HTML? I haven't been able to locate a W3C reference on the matter.

papabaer

9:45 am on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The W3C Validator has been offline for the last several hours but the following validates according to the CSE HTML Validator Pro v5.03

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms Within Tables</title>
</head>

<body>
<table border="1" width="200" summary="This is valid but renders an unwanted trailing space after the input element.">
<tr>
<td>
<form method="POST" action="url" name="f1">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>
<br />

<table border="1" width="200"
summary="This is valid because the form is contained within a single table cell. The style display:inline eliminates the unwanted trailing space.">
<tr>
<td>
<form method="POST" action="url" name="f1" style="display:inline;">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>

<form method="POST" action="url" name="f1">
<table border="1" width="200"
summary="This is valid because the entire table is contained withing the form and the input element is contained within a single table cell. No trailing space is rendered within the table cell but default spacing IS rendered before and after the form element. The style display:inline will eliminate unwanted element spacing.">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>
</body>
</html>

Key_Master

2:45 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In papabaer's example, Mozilla is still showing an extra blank row for the second form although it is validating with HTML Tidy. This is because Netscape doesn't give much preference to the style attribute in forms.

I know, I don't like it much either. :)

papabaer

3:09 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I tested using Mozilla 1.1a and the appied style functioned as intended; there was no "blank row." Which version of Mozilla did you test with?
Remember too, in the example posted the inline style was only applied to the second example.

Try this in Mozilla:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forms Within Tables</title>
</head>

<body>
<table border="1" width="200"
summary="This is valid but renders an unwanted trailing space after the input element.">
<tr>
<td>
<form method="POST" action="url" name="f1">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>

<table border="1" width="200"
summary="This is valid because the form is contained within a single table cell. The style display:inline eliminates the unwanted trailing space.">
<tr>
<td>
<form method="POST" action="url" name="f1" style="display:inline; margin:0;">
<input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" />
</form>
</td>
</tr>
</table>

<form method="POST" action="url" name="f1" style="display:inline; margin:0;">
<table border="1" width="200"
summary="This is valid because the entire table is contained withing the form and the input element is contained within a single table cell. No trailing space is rendered.">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>
</body>
</html>

You will see three "stacked" tables with the first showing added spacing (within the td) and no trailing spaces in the following two examples. I added the margin:0; to eliminate form element spacing between the second and third examples.

Key_Master

3:54 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I wonder what effect display:inline is really having. The following form/table seems to render just as well in both IE and Mozilla using just margin:0;.

<form method="POST" action="url" name="f1" style="margin:0;">
<table border="1" width="200">
<tr>
<td><input type="hidden" name="stuff" value="1" /> <input type="submit" name="var"
value="press" alt="click to submit" /></td>
</tr>
</table>
</form>

I'm using the K-Meleon browser.

[kmeleon.sourceforge.net...]

papabaer

4:34 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



K-Meleon is not Mozilla though both are based on the Gecko engine. K-meleon is a fast browser but is still quite a bit behind in CSS support.

What level of support for standards does K-Melon (sic) provide?

K-Meleon uses the Gecko rendering engine developed for Mozilla which provides excellent support for current HTML, CSS [level 1 and some level 2] and DOM standards.

[kmeleon.sourceforge.net...]

Though setting margin:0; or declaring display:inline accomplish the same results (in most browsers) they work in very different ways. Setting margin:zero overides the default element spacing inherent to forms (again, as rendered in most browsers) while declaring display:inline modifies the "block element," FORM, into an inline behavior.

Other that "strictly speaking," it's six of one, half-dozen of the other. The deciding factor should be the level of support each method demonstrates.

When you tested the display:inline style with K-Meleon apparently you were shown that K-meleon's lack of support for this application. As you report, using margin:0; DOES supply a solution when rendered in K-meleon.

I wonder what version of the Gecko engine K-meleon is using? Mozilla offers a higher level of CSS 2 support so there is a difference between the two....

Key_Master

4:59 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



display:inline; causes the form button to disappear in Netscape 4.7. Using just margin:0; seems to be the most cross browser compatible. Netscape 4.7 seems to ignore it but will allow the button to render.

P.S. Thanks for the discussion. Very interesting. :)

papabaer

5:17 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes, it is always interesting (and often unsettling! ;)) to find new little quirks to deal with... but that is good to hear about margin:0; - that is my usual method of choice!

Live 'n learn! :)

keyplyr

10:03 pm on Jun 23, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I just love it when you guys get together and tackle a browser support problem; I sit back and wait for the solution. Thanks for another remedy to something I've wanted to fix for a while now, but fell victim to complacency.

Dr_Kelvin

4:24 am on Jun 24, 2002 (gmt 0)



Speaking of quirks....why would the button disappear in NN 4.7 when "display: inline" was declared inline, but reappear when the same was used in an external style sheet?

rewboss

8:29 am on Jun 24, 2002 (gmt 0)

10+ Year Member



Any question beginning "Why does Netscape 4...?" requires no answer. Netscape 4 does what it does because it's Netscape 4.