Solved

Forms occupy invisible additional space

Posted on 2000-04-19
21
342 Views
Last Modified: 2010-04-07
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>
0
Comment
Question by:bigstar
  • 6
  • 4
  • 4
  • +3
21 Comments
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 2732971
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...
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2733376
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
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2736283
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.
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2736929
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
0
 
LVL 2

Expert Comment

by:DKostov
ID: 2738440
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>

0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2738565
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
0
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 2738654
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
0
 
LVL 2

Expert Comment

by:DKostov
ID: 2738767
Hey I apologize davlun20080,
When I posted the answer I didn't read the comments at all.

Sorry
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2738809
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
0
 
LVL 2

Expert Comment

by:DKostov
ID: 2738875
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

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 3

Expert Comment

by:davlun20080
ID: 2739536
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
0
 

Author Comment

by:bigstar
ID: 2739718
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?


0
 
LVL 7

Accepted Solution

by:
nettrom earned 25 total points
ID: 2739725
Keep the form element inside the table cell since the problem is moved. :)

But yes, there is white space right before the closing table cell, there's a CRLF and several spaces between <img src ... > and </td>, if you close it up, making it <img src ... ></td> the space is gone.
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2740389
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
0
 

Author Comment

by:bigstar
ID: 2742347
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?
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2742415
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).
0
 

Author Comment

by:bigstar
ID: 2742515
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
0
 
LVL 7

Expert Comment

by:nettrom
ID: 2742559
People usually drop by Customer Support and ask the E-E guys to split the points for them.

http://www.experts-exchange.com/Customer_Service/
0
 
LVL 3

Expert Comment

by:darinw
ID: 2745238
Community Support has reduced points from 50 to 25
0
 
LVL 3

Expert Comment

by:darinw
ID: 2745239
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:
http://www.experts-exchange.com/bin/NewQForm?ta=1163

darinw
Customer Service
0
 

Author Comment

by:bigstar
ID: 2746226
Points now awarded as proposed to Nettrom & Davlun2000. Thanks to all
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
This video discusses moving either the default database or any database to a new volume.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now