#196917 - 07/01/2004 18:39
HTML forms... Too much space between them?
|
carpal tunnel
Registered: 20/12/1999
Posts: 31602
Loc: Seattle, WA
|
If I create more than one HTML <form></form> on a page, there is a significant amount of white space between them. No matter how few line breaks I insert between the two forms, there is always a gap on the screen.
Is there any way, using regular HTML (ie, not something compllicated that requires a secondary file like a stylesheet), that I can reduce the space so that the input fields of one <form> are directly atop the input fields of the next <form>?
Example code:
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</FORM>
<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</FORM>
In the above example, these two forms are separated by
a couple of blank lines, even though there are no blank
lines at those points in the code.
Note, this is for personal use so therefore it's OK if the
solution is IE-specific.
Anyone?
|
|
Top
|
|
|
|
|
#196918 - 07/01/2004 19:01
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
pooh-bah
Registered: 31/08/1999
Posts: 1649
Loc: San Carlos, CA
|
Stick the forms in a table....
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</FORM>
</td></tr>
<tr><td>
<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</FORM>
</td></tr></table>
-Mike
|
|
Top
|
|
|
|
|
#196919 - 07/01/2004 19:21
Re: HTML forms... Too much space between them?
[Re: mcomb]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31602
Loc: Seattle, WA
|
That was the first thing I tried. No change in the amount of space between the forms. I even tried it again just now, cut and pasted your code exactly to make sure I wasn't doing it wrong. No change.
If I add border=1 to that table, I see that the white space falls immediately after the input text field. There is the text field, a white space, then the bottom border of that table cell.
|
|
Top
|
|
|
|
|
#196920 - 07/01/2004 19:29
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 23/08/2000
Posts: 3826
Loc: SLC, UT, USA
|
Try putting the form tag before the td tag and close it after the closing td.
<table border="0" cellspacing="0" cellpadding="0">
<tr><FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<td>
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</td></FORM></tr>
<tr><FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<td>
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</td></FORM></tr></table>
EDIT: okay, that works.
Edited by loren (07/01/2004 19:31)
|
|
Top
|
|
|
|
|
#196921 - 07/01/2004 19:31
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
old hand
Registered: 14/04/2002
Posts: 1172
Loc: Hants, UK
|
IE always puts a line break in for a </FORM> tag. I usually stuff it inbetween the table tags (eg. after a </TR> but before a </TABLE>).
Bloody annoying it is too!
Gareth
|
|
Top
|
|
|
|
|
#196922 - 07/01/2004 19:39
Re: HTML forms... Too much space between them?
[Re: loren]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31602
Loc: Seattle, WA
|
Loren, you get the brownie pin for today. That works.
Very very odd and tricky for it to work that way. You shouldn't be able to put the form tags between the TR and the TD like that, it goes against the way I understand these things to work. But if fools IE's parser and formatter quite nicely, thank you.
Rock.
|
|
Top
|
|
|
|
|
#196923 - 07/01/2004 20:13
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
pooh-bah
Registered: 15/01/2002
Posts: 1866
Loc: Austin
|
technically, you shouldnt be able to. but html is a very loose standard
|
|
Top
|
|
|
|
|
#196924 - 07/01/2004 20:38
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
not something compllicated that requires a secondary file like a stylesheet
Well, it doesn't get any less complicated, but you can avoid the separate file requirement by putting the CSS from the stylesheet directly in the HTML.
Just include a <style> section inside the <head> tags, like this:
<head>
<title>differentpla.net</title>
<style>
body { font-family: Verdana; font-size: 0.9em; }
</style>
</head>
_________________________
-- roger
|
|
Top
|
|
|
|
|
#196925 - 07/01/2004 20:59
Re: HTML forms... Too much space between them?
[Re: Roger]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
you can avoid the separate file requirement by putting the CSS from the stylesheet directly in the HTML. That's what I was thinking, too. It is simple, it does eliminate the need for a second file, and the small font size is one thing I would have tried as well. But it doesn't work for this, apparently 
I'm trying various CSS methods to try to fix this, but I'm coming up short. Does anyone else have a solution to this that doesn't involve fooling the browser? How does the code work in other browsers?
_________________________
Matt
|
|
Top
|
|
|
|
|
#196926 - 07/01/2004 21:13
Re: HTML forms... Too much space between them?
[Re: Roger]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
Okay, this makes absolutely no sense, but here you go anyway. Tony, you can use the original code you posted, which will work fine.
Then use the style definitions in the head. This is what confuses me:
These don't work:
form { margin-top: 0px }
form { margin-bottom: 0px }
form { margin-left: 0px }
form { margin-right: 0px }This does work:
form { margin: 0px }I was under the impression that "margin: 0px" was a combination of all four sides defined at once, nothing more.
So anyway, put this in the head:
<style>
form { margin: 0px }
</style> That should work!
_________________________
Matt
|
|
Top
|
|
|
|
|
#196927 - 08/01/2004 03:40
Re: HTML forms... Too much space between them?
[Re: Dignan]
|
addict
Registered: 05/05/2000
Posts: 623
Loc: Cambridge
|
Alternatively, use CSS to hide the offending tags. This does require you to put code in the HTML, but it's less code than a table.
.hidden {display: none}
<div class="hidden"><form></div>
|
|
Top
|
|
|
|
|
#196928 - 08/01/2004 06:03
Re: HTML forms... Too much space between them?
[Re: Dignan]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
But it doesn't work for this, apparently
Yeah. You have to define the font size explicitly for <td>, so I wonder if you have to for <form> as well?
_________________________
-- roger
|
|
Top
|
|
|
|
|
#196929 - 08/01/2004 08:37
Re: HTML forms... Too much space between them?
[Re: David]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
This does require you to put code in the HTML, but it's less code than a table. Not sure what you mean, though. My solution didn't require a table. Here's the whole code for Tony's page, using what I did:
<html>
<head>
<style>
form { margin: 0px }
</style>
</head>
<body>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</FORM>
<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</FORM>
</body>
</html>
_________________________
Matt
|
|
Top
|
|
|
|
|
#196930 - 08/01/2004 10:19
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
addict
Registered: 03/03/2002
Posts: 687
Loc: Atlanta, Georgia
|
Hey, Tony..
Just curious, when I look at the code in a browser, I have a single text line (blank) seperating the two text boxes. You mean that line? Or when you look at it, do you have more than just a line's worth of blank space?
Without using the CSS style mentioned, there isn't a way to get rid of it, unfortunately. If you look, there's the same whitespace at the top of the first form as well. (At least, when I view it.) It's 'built-in' to the form when it's on nothing but the base document page.
May also want to consider adding SUBMIT buttons.
For an unrelated grouping effect (say, instead of tables) try this:
<FORM ACTION="http://empeg.comms.net/php/dosearch.php"METHOD="GET">
<FIELDSET><LEGEND><B>Box #1</B></LEGEND>
<INPUT TYPE="hidden" NAME="Match" VALUE="And">
<INPUT TYPE="hidden" NAME="Forum" VALUE="All_Forums">
<INPUT TYPE="hidden" NAME="Old" VALUE="allposts">
<INPUT TYPE="hidden" NAME="Limit" VALUE="99">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48">
</FIELDSET>
</FORM>
<FORM ACTION="http://www.riocar.org/searchfaq.php" METHOD="GET">
<FIELDSET><LEGEND><B>Box #2</B></LEGEND>
<INPUT TYPE="hidden" NAME="type" VALUE="faq">
<INPUT TYPE="TEXT" NAME="query" SIZE="10" MAXLENGTH="50">
</FIELDSET>
</FORM>
I love those things. Come in real handy when you don't want to, or can't use a table, and they look much more 'official'..
Me.
_________________________
Mike 'Fox' Morrey
128BPM@124MPH. Love it!
2002 BRG Mini Cooper
|
|
Top
|
|
|
|
|
#196931 - 08/01/2004 10:57
Re: HTML forms... Too much space between them?
[Re: foxtrot_xray]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
Without using the CSS style mentioned, there isn't a way to get rid of it, unfortunately. If you look, there's the same whitespace at the top of the first form as well. (At least, when I view it.) It's 'built-in' to the form when it's on nothing but the base document page. Yeah, that appears to be the problem. I'm not sure if it's IE's fault, either. Netscape (4.7, at least, it's the only other browser on my work machine) adds the space as well. I think it's just one of those things. I have no clue why they would add it, though.
It's the same with headings. All my sites have margin properties for every heading in the style sheets, because all headings have a large amount of default space underneath them. I can't imagine why they added this.
_________________________
Matt
|
|
Top
|
|
|
|
|
#196932 - 08/01/2004 11:13
Re: HTML forms... Too much space between them?
[Re: foxtrot_xray]
|
carpal tunnel
Registered: 18/01/2000
Posts: 5683
Loc: London, UK
|
Oh, so that's what <fieldset> does? Cool.
_________________________
-- roger
|
|
Top
|
|
|
|
|
#196933 - 08/01/2004 11:27
Re: HTML forms... Too much space between them?
[Re: foxtrot_xray]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31602
Loc: Seattle, WA
|
Wow, guys, this is a great thread. Lots of good information here, thanks!
I wanted to answer a couple specific things:
Just curious, when I look at the code in a browser, I have a single text line (blank) seperating the two text boxes. You mean that line? Exactly. I did not specify a blank line in my code, why should there be one on the screen? I wanted two boxes touching, one atop the other, but which were completely different forms going to two completely different web sites. Loren's first suggestion of fooling the browser works, and I'm also going to try the margin:0px trick because that's more likely going to be better forward-compatible as there are browser changes and upgrades in the future.
May also want to consider adding SUBMIT buttons. For the specific purpose of these boxes, I needed them to be as small and as simple as possible, and to take up as little screen real-estate as possible, since they are on a side toolbar with a bunch of other stuff. Hence my desire for less white space. A submit button takes up too much space for my intended purpose. Also, I just wanted to type the text and press the Enter key. Submit buttons are so redundant.
|
|
Top
|
|
|
|
|
#196934 - 08/01/2004 11:35
Re: HTML forms... Too much space between them?
[Re: foxtrot_xray]
|
carpal tunnel
Registered: 20/12/1999
Posts: 31602
Loc: Seattle, WA
|
Oh, and that Fieldset/Legend trick does work simultaneously with Loren's table trick, just tried it. Thanks! I had labeled the boxes with a small font already, but I'm going to try the fieldset thing and see if I like its looks better.
|
|
Top
|
|
|
|
|
#196935 - 08/01/2004 11:49
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 13/07/2000
Posts: 4180
Loc: Cambridge, England
|
Exactly. I did not specify a blank line in my code, why should there be one on the screen? The interaction between IE's forms and its layout is simply insane. Sometimes, if the form is in a table cell, adding a second, invisble form to the table cell can help reduce the spacing. But the invisible form must have at least two fields, otherwise it doesn't work:
<table border><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM><form action="wurdle" method="post" name="f3">
<input type="hidden" name="foo">
<input type="hidden" name="2foo">
</form>
</td></tr><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM><form action="wurdle" method="post" name="f4">
<input type="hidden" name="foo">
</form>
</td></tr><tr><td>
<FORM ACTION="http://empeg.comms.net/php/dosearch.php" METHOD="GET">
<INPUT TYPE="TEXT" NAME="Words" SIZE="10" MAXLENGTH="48"><input type=submit>
</FORM>
</td></tr></table> In IE, only the top cell is free of unwanted padding. Unfortunately, in Mozilla, only the bottom cell is free of unwanted padding. Bunch of monkeys.
Peter
|
|
Top
|
|
|
|
|
#196937 - 08/01/2004 12:38
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
...or monkeys smoking crack...
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#196938 - 08/01/2004 12:59
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
Oh, and that Fieldset/Legend trick does work simultaneously with Loren's table trick Damn, thought I'd win for sure! Oh well, maybe someday...
_________________________
Matt
|
|
Top
|
|
|
|
|
#196940 - 08/01/2004 13:08
Re: HTML forms... Too much space between them?
[Re: tfabris]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
Woohoo!!
Although now I want to mess around with that <fieldset> tag too
_________________________
Matt
|
|
Top
|
|
|
|
|
#196941 - 08/01/2004 14:23
Re: HTML forms... Too much space between them?
[Re: Dignan]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
If you like obscure bits of HTML, check out the "FOR" attribute on the "LABEL" element. It lets you associate a label with an checkbox or radiobutton element. This allows the user to click on the text in the label to toggle the option, rather than having to click on the control.
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="checkbox" id="chkTest"/><label for="chkTest">blah</label>
</body>
</html>
Edited by andy (08/01/2004 14:27)
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#196942 - 08/01/2004 14:53
Re: HTML forms... Too much space between them?
[Re: andy]
|
carpal tunnel
Registered: 08/03/2000
Posts: 12341
Loc: Sterling, VA
|
So that's how they do that!! I always love when I'm able to do that. Is the coding for Windows applications the same? I notice many programs do that and some do not.
_________________________
Matt
|
|
Top
|
|
|
|
|
#196943 - 08/01/2004 14:59
Re: HTML forms... Too much space between them?
[Re: Dignan]
|
carpal tunnel
Registered: 10/06/1999
Posts: 5916
Loc: Wivenhoe, Essex, UK
|
How it is done in a Windows app will depend entirely on what the app is coded in. Tools like Visual Basic do it for you, when ever you create a checkbox or radiobutton it makes the label clickable in the same way.
_________________________
Remind me to change my signature to something more interesting someday
|
|
Top
|
|
|
|
|
#196944 - 09/01/2004 05:27
Re: HTML forms... Too much space between them?
[Re: Dignan]
|
addict
Registered: 05/05/2000
Posts: 623
Loc: Cambridge
|
This does require you to put code in the HTML, but it's less code than a table.
Not sure what you mean, though. My solution didn't require a table.
I was just giving another alternative to using a table, not an alternative to your more elegant solution.
|
|
Top
|
|
|
|
|
|
Previous Topic
Index