Link to home
Start Free TrialLog in
Avatar of bigstar
bigstar

asked on

Forms occupy invisible additional space

The following is a table containing a form generated by Dreamweaver 3. Although the form is unfinished (to be passed to a colleague who will change references to refer to ASP programming) I've noticed one annoying feature which has occured numerously when using Dreamweaver and other HTML Editors that I'm hoping one of you experts can explain and solve.

Namely: The FORM command seems to introduce invisible space around the components (text box, Submit button etc)which basically hampers my design. In this example below for instance, I have what amounts to a paragraph space below the Javascript Jump Menu and Textbox fields which i don't want. Similarly, the submit/go button occupies space to right which I don't want either.

I've tried controlling these elements with cells and layers. Layers work to some degree, but when converted back to tables the unwanted space returns.

Hope this all makes sense - I can post the whole page, if the table appears to out of context or other code may have a bearing on this phenomina.

Thanks



<table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr valign="middle">
        <td height="20">
          <form method="post" action="">
            <font face="Verdana, Arial, Helvetica, sans-serif" size="2">CATALOGUE
            SELECTIONS</font>
            <select name="Catagories" onChange="MM_jumpMenu('parent',this,0)">
              <option value="comments.txt" selected>Americana</option>
              <option value="comments.txt">Antiques</option>
              <option value="comments.txt">Art Materials</option>
              <option value="comments.txt">Books</option>
              <option value="comments.txt">Briac-A-Brac</option>
              <option value="comments.txt">Crafts</option>
              <option value="comments.txt">Exotica</option>
              <option value="comments.txt">Furniture</option>
              <option value="comments.txt">Machines</option>
            </select>
            <font face="Verdana, Arial, Helvetica, sans-serif" size="2">SEARCH
            KEYWORD</font>
            <input type="text" name="textfield">
            <input type="submit" name="Submit" value="Go">
            <img src="images/black_dot.gif" width="100%" height="1">
          </form>
        </td>
      </tr>
    </table>
Avatar of Jan Louwerens
Jan Louwerens
Flag of United States of America image

yes, it is pure HTML, not just Dreamweaver. We don't use any html authoring software, but we have run into the same problem. And as of yet, I know of no solution to it (we have just dealt with it and worked around it)

PS: I first ran across this question in the HTML section, but it referred me here, so I came to this one instead. But just for future reference, you should at least put a link to the original question in any other topic area you want to post to, because most people won't take the time to browse for another question...
Avatar of davlun20080
davlun20080

bigstar,
place your form tags (beginning and end) between the </td>and<td> elements.   DW will not like the placement at all, but it should result in minimizing the space around the table.  

Using DW myself, I create the page as I wish, then add the form tags manually,  just before testing.  Otherwise, the WYSIWIG window in DW will skew your layout with the tags that it thinks is unclosed or misplaced.

davlun
Came to this from the HTML forum.

There's two things you need to do to get the space collapsed.

1: move the start and end tags of FORM outside the table.  I'd enclose the table with the FORM element, having the start tag of FROM right in front of the start tag of TABLE, and likewise with the end tags.

2: close up the white space before the closing tag of the table cell (</td>)

Removed the blank space neatly in my IE4.  Since I re-installed Win98 about an hour ago I haven't got Netscape 4 to test with yet.
In my experience, if you put the form tags around the table, then you will get extra space around the table as a whole.  In some designs this is very undesirable.  nettrom reference to cleaning up extra white space can be essential depending on what elements you are rendering in the table.

As for DW, if you want to build everything in your form, create the form first by inserting the form, then position the cursor in the form and create your table.  Form tags will automatically be outside the table.

davlun
Put the <form> out of the <td>. Also the problem appears with the <input type=hidden>. The resolution is the same. I think that is the case only for IE 4+

<table width="600" border="1" cellspacing="0" cellpadding="0">
      <tr valign="middle">
        <form method="post" action="">
        <td height="20">
            <font face="Verdana, Arial, Helvetica, sans-serif" size="2">CATALOGUE
            SELECTIONS</font>
            <select name="Catagories" onChange="MM_jumpMenu('parent',this,0)">
              <option value="comments.txt" selected>Americana</option>
              <option value="comments.txt">Antiques</option>
              <option value="comments.txt">Art Materials</option>
              <option value="comments.txt">Books</option>
              <option value="comments.txt">Briac-A-Brac</option>
              <option value="comments.txt">Crafts</option>
              <option value="comments.txt">Exotica</option>
              <option value="comments.txt">Furniture</option>
              <option value="comments.txt">Machines</option>
            </select>
            <font face="Verdana, Arial, Helvetica, sans-serif" size="2">SEARCH
            KEYWORD</font>
            <input type="text" name="textfield">
            <input type="submit" name="Submit" value="Go">
            <img src="images/black_dot.gif" width="100%" height="1">
        </td>
        </form>
      </tr>
    </table>

For DKostov,
Your solution is a variation of a comment already posted as a comment, by myself coincidentally.  I advised to put the form tags between the </td> and <td> tags, or to use your words, 'out of the <td>'.  

In these scenarios I am reminded of the time I was reprimanded as a new user for posting an answer and locking the question before the comment could be evaluated by the poster of the question.  I was informed nicely that comments are better until the user has had a chance to evaluate the comments and how that best addresses their problem.  This way if the user needs clarification, they can continue in comments without having to go through the rejection process.

This keeps the discussion going at EE until the best solution is found, which is the point of EE, finding the best solution.  With the redesign of EE, this is even easier now that the user can select a comment as their answer.

just my two cents (and then some) worth,
davlun
yes, davlun20080, I agree with you. I sometimes wonder why they didn't do away with question locking altogether when allowing comments to be graded as answers. I've had quite a few questions lost because someone reposted what I wrote as an answer instead of a comment
Hey I apologize davlun20080,
When I posted the answer I didn't read the comments at all.

Sorry
DKostov,
Not an issue per se.  In fact you and I have been around about the same amount of time at EE.  And most likely the only difference is that I was slammed hard in an early answer here at EE.  It was only after thinking about what was said did I begin to see the merit of what was said to me so rudely.  Hopefully you did not feel slammed.  This will happen to all of us once in a while, it's just the way this kind of forum works.  I can't tell you how many times I have seen comments posted within minutes of each other with the same info.  Each person started on the question at about the same time, arrived at an answer and posted it.  In the interim the other person posted as well.

Happy Easter,
davlun
dalvun,
I participate in this forum mostely because of the spirit of EE. This time I abused that spirit by mistake, so your reaction was normal.

:))

Happy Easter,
Dimitar

You mention the spirit of EE, so I will continue the discussion for the moment.  It is people willing to talk and work at solution to fit all that makes EE a great place.  I am glad you are involved in EE and I hope all is well with you...David
Avatar of bigstar

ASKER

Thanks for the comments. Glad to see my question has prompted a little "off-line" type banter also.

DAVLUN - Putting the form tag inside the <TD> tags does help and minimise the unwanted space as you suggest, however...

NETTROM - If I move the start and end tags of FORM outside the table this just moves the problem elsewhere - like a bubble underneath proverbial wall paper affecting the table above or below or both?

And what do you mean by closing up the white space before the closing tag of the table cell (</td>) - there isn't any in my original question is there?


ASKER CERTIFIED SOLUTION
Avatar of nettrom
nettrom

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I am not sure if what you are describing is a problem you are having bigstar, but the following html should give you two tables back to back with no space in between and no extra space within the tables.  This has been tested in both IE and NS.


<html>
<head>
<title>Some Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
This is some data describing my form:<br>
<table width="75%" border="0" cellpadding="0" cellspacing="0">
  <tr bgcolor="#CCCCCC">
    <td>this is the top of the first table</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td><form method="post" action="">
  </tr>
  <tr bgcolor="#CCCCCC">
    <td>
      <input type="text" name="textfield">
    </td>
    <td>
      <input type="radio" name="radiobutton" value="radiobutton">
      radio button</td>
    <td>
      <input type="checkbox" name="checkbox" value="checkbox">
      checkbox </td>
  </tr>
  <tr bgcolor="#0000CC">
    <td>
      <select name="select">
        <option>some list values</option>
        <option>some other value</option>
        <option selected>select one</option>
      </select>
    </td>
    <td>
      <input type="submit" name="Submit" value="Submit">
    </td>
    <td>
      <input type="submit" name="Submit2" value="Submit">
    </td></form>
  </tr>
</table>
<table width="75%" border="0" cellpadding="0" cellspacing="0">
  <tr bgcolor="#660000">
    <td><font color="#CCCCCC">this is my next table</font></td>
    <td>&nbsp; </td>
    <td>&nbsp; </td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td>&nbsp; </td>
    <td>some wording</td>
    <td>some more wording</td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td colspan="3"><font size="4" color="#0000FF">there is no space above it.</font></td>
  </tr>
</table>
</body>
</html>

davlun
Avatar of bigstar

ASKER

Thanks Nettrom & Davlun

DAVLUN - I Pasted your tables into Notepad, then played around with them and they were fine. The problem I'd created in my table was not apparent.

NETTROM & DAVLUN - I used to code by hand but have been using Dreamweaver & Home Site these past couple of years and so easy to let the WYSIWYG's do all the work for you. I feel I have become a little divorced from the REAL code.

What I studied your solutions, I went back to my own table(s), removed some of the indentation, put the closing:

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

butt up against each other that all my space problems seem to disappear.

What I don't understand is how the indentation, CRLF etc are being interpreted as space - surely this universal method of coding is being misinterpreted by the WYSIWYG's or am I misunderstanding something here?
I don't think you're misunderstanding.  It's a combination of what the software writes and how the browser interprets that.  I'm slightly suprised that the software actually creates this kind of a problem, since it's commonly known among hand-coders that if you want tables without any margins you'll have to close up your whitespace.

The software isn't doing a really bad job though.  According to the HTML spec, whitespace doesn't matter, and multiple occurances of whitespace is collapsed into one.  And if there's whitespace at the end of the content in an element it should be ignored, at least that's how Internet Explorer usually interprets it.  I'm not sure why it interprets it differently this time (maybe it's the image, maybe it's the combination of the form and the table and the image, would have to research into it to figure it out).
Avatar of bigstar

ASKER

NETTROM - Thanks for your reply.

I am using IE5, but have had varying results at differing times with the <form> command and the old white space problem. Anyway I've learnt something with this experience - and know what to do on this project and future ones - fix the WYSIWYG, or code them by hand- so thanks.

Regarding the points - I think it's fair to split them between DAVLUN and yourself. If you or anyone can advise on how I do this I'd be glad to award them forwith.

Thanks again
People usually drop by Customer Support and ask the E-E guys to split the points for them.

https://www.experts-exchange.com/Customer_Service/
Community Support has reduced points from 50 to 25
Hello everyone,

I have reduced the points on this question to one half to allow for a split.

bigstar: You can now accept one of the comments as an answer to award the first Expert. Remember the Accept Comment as Answer button is in the header of the comment.

For the second Expert, you need to create a new question in this topic area. The title should be 'For ExpertName -- 10331132' with the appropriate Expert name and points assigned.

For your convenience, you can use this link to create the new question:
https://www.experts-exchange.com/bin/NewQForm?ta=1163

darinw
Customer Service
Avatar of bigstar

ASKER

Points now awarded as proposed to Nettrom & Davlun2000. Thanks to all