Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Form margins

Posted on 1999-07-17
6
Medium Priority
?
294 Views
Last Modified: 2010-04-09
Is there a way to get rid of the space margins around forms like drop-down menus?
0
Comment
Question by:gr8gonzo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 1852063
yes, it's possible using CSS.  something like:

<style type="text/css">
select { margin-top: 0; margin-bottom: 0; }
</style>

should do the trick.  only works in those browsers that support CSS well.  don't think Netscape does it.  IE4/5 does, from what I've been able to find out with tests.
0
 
LVL 2

Expert Comment

by:djsansui
ID: 1852064
Yes, CSS is one way, though not the best method.  There are 2 things you should do to correct the problem properly.  First, place the form within a table with border, cellspacing and cellpadding all set to 0.  You should keep each element in it's own cell.  This won't solve your problem completely, but it is a good habit to get into, forms are much better used when they are within a table.

To answer your question, when browsers interpret the <form> tags, they add an extra linebreak there.  You should keep all your forms in one form, as opposed to separate forms, this keeps the individual elements from double-spacing.  Next, place whatever text is above or below the form elements within the form tags.  i.e.

<form>
Enter your name:<br>
<input type=text name="name">
Thanks for putting in your name.
</form>


0
 
LVL 35

Author Comment

by:gr8gonzo
ID: 1852065
It IS in a table, but that doesn't solve my problem. I think the CSS way is the way to go, but I'm going to leave this question open, just in case. If no other answer presents itself, then I'll give points to nettrom.

The reason I don't want the extra linebreak is because the height of a table row depends on the form (i.e. the form is there, so the table row is taller because of the extra space below the form) and the table row is shaded in the background.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 2

Expert Comment

by:djsansui
ID: 1852066
did you do the second part?  Please post the code of your form (or at least some of it), it shouldn't double-space if you do that.  Make sure that each form element isn't in it's own form, it should be something like this:

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

I'd avoid CSS because it only works with newer browsers, and isn't perfectly cross-compatable either, so it is better to fix it using plain HTML.

Please post your code, or a link to your page, so we can see what your problem is.  Thanks.  
0
 
LVL 2

Accepted Solution

by:
djsansui earned 400 total points
ID: 1852067
Redesign your table.  It should look like this:

<form>
<table>
:
:
</table>
</form>

This will definately solve the problem with the background being too big, just set the outer table (or td) to be the main color, and then have the table within the form set to the other color.  

It won't solve the problem completely, but it will make that extra space invisible.  You could also find a place on the page where you have a <br> tag and replace it with a <form> or </form> tag before and after the form, respectively.

If the first solution doesn't make satisfactory results, try the second.  It will solve the problem you described.
0
 
LVL 1

Expert Comment

by:kodiakbear
ID: 6815025
Fixed the -1 problem on this question.
Escrow points corrected.

kb
Community Support Moderator
Experts Exchange
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

670 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