how can I make input form look better ?

khaleghi
khaleghi used Ask the Experts™
on
Hi ,
I have created an input form by Dw Cs4 in an Asp page,
There is some space between fields in browsers and the form looks diffuse, I have tried to set a Css with 0px margin and padding for the table and form but nothing changed
Is there any simple way to make the form more tighten?
Many thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2005

Commented:
Yes, take it out of the table and use pure CSS layout.

Do you have an example link?

I've attached an example of a pure CSS form layout which may help you get an idea where to start, but I and others are here to help with your specific layout.

Regards,
Rod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005 Roderick Divilbiss">
<style>
<!--
/* basic styles */

* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px/14px Arial, Helvetica, sans-serif;
	color: #000;
	width: 360px;
	margin: 20px auto;
	text-align: left;
}

h1 {
	font: bold 20px/21px Helvetica, Arial, sans-serif;
	margin: 10px 0px;
}

p {
	width: 360px;
	margin: 0px 0px 20px 0px;
}

ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: relative;
}

li {
	display:block;
	float:left;
	margin: 0px;
	padding: 0px;
}


/* form styles */

form {
	width:360px;  /* the box which contains the fieldsets */
	text-align:left;
}

fieldset {
	clear:left;   /* keeps the fieldsets stacking atop each other */
	padding:15px; /* the fieldset is a box around the fields. a little left padding is nice. */
	/* border:0; You can turn off the border if you wish */
}

legend {
	margin: 5px 0px 5px -10px; /* a little top & bottom margin to keep the fieldsets from touching */
	font-size:14px;
	line-height:16px;
	font-weight:bold;
}

form label {
	/* the label wraps the input filed and the example text and is a box.
	we apply sizing to this box to arrainge the fields as we wish in
	a grid. 
	*/
	display: block;
	width: 310px; /* maximum width of a field, we can make them smaller below */
	font-size: 12px;
	line-height: 14px;
	padding: 0px 0px 12px 0px;  /* make room for the example text */
	margin-bottom: 10px;  /* make room between rows */
}

form input {
	display: block;
	width:100%; /* make it the same size as the containing lable box */
}

form select {    /* we have no selects, textareas or checkboxes, but you would do similar to input */
	float: left;
	display: block;
}

/* specific to this form, e.g. size and arrange the fields as we wish */
#form-status {  /* a place to show messages from server side validation */
	float: left;
	width: 310px;
	font-weight:bold;
	font-size:16px;
}

#label-first, #label-last {
	float: left;
	width: 130px;
	padding:0px;
	margin-right: 10px;
}

#label-middle {
	float: left;
	width: 26px;
	padding:0px;
	margin-right: 10px;
}

#label-address {
	float: left;
	padding: 0px;
	width: 310px;
}

#label-city {
	float: left;
	padding: 0px;
	width: 140px;
	margin-right: 10px;
}

#label-state {
	float: left;
	width: 36px;
	padding:0px;
	margin-right: 10px;
}

#label-zipcode {
	float: left;
	padding: 0px;
	width: 110px;
	margin-right: 10px;
}

#label-email {
	float: left;
	padding: 0px;
	width: 310px;
}

#label-homephone, #label-workphone {
	float: left;
	padding: 0px;
	width: 150px;
	margin-right: 10px;
}

.xampl {
	float:left;
	display: block;
	color:#555555;
	font-size:10px;
}

#bSubmit {
	clear:left;
	width:auto; /* override the width 310px we set above for input(s) so it will auto size as normal */
}

.nocss {
	display:none;
}
/* page specific other than the form */

#content {
	left:20px;
}

.reqsym {
	font-weight:bold;
	margin:0 2px 0 2px;
}
-->
</style>
</head>
<body>
<div id="content">
  <div id="form-status">Enter Information (* = required field)</div>
  <form action="null.html" method="post">
    <fieldset>
      <legend>Name & Address</legend>
      <ul>
        <li><label id="label-first">First Name <span class="reqsym">*</span><input name="first" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">John</span></label></li>
        <li><label id="label-middle">MI <span class="reqsym"></span><input name="middle" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Q</span></label></li>
        <li><label id="label-last">Last Name <span class="reqsym">*</span><input name="last" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Public</span></label></li>
        <li><label id="label-address">Address <span class="reqsym">*</span><input name="address" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">1234 E Any St</span></label></li>
        <li><label id="label-city">City <span class="reqsym">*</span><input name="city" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">Hometown</span></label></li>
        <li><label id="label-state">ST <span class="reqsym">*</span><input name="state" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">AL</span></label></li>
        <li><label id="label-zipcode">Zip Code <span class="reqsym">*</span><input name="zipcode" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">99999-9999</span></label></li>
      </ul>
    </fieldset>  
    <fieldset>
      <legend>Contact Information</legend>
      <ul>  
        <li><label id="label-email">E-Mail Address <span class="reqsym">*</span><input name="email" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">john.public@domain.com</span></label></li>
        <li><label id="label-homephone">Home Phone <span class="reqsym"></span><input name="homephone" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">999-999-99999</span></label></li>
        <li><label id="label-workphone">Work Phone <span class="reqsym"></span><input name="workphone" type="text" value=""><span class="nocss">&nbsp;Example:&nbsp;</span><span class="xampl">999-999-99999</span></label></li>
        <li><input type="submit" id="bSubmit" name="bSubmit" value="Submit"></li>
      </ul>  
    </fieldset>
  </form>
</div>
</body>
</html>

Open in new window

I would say make sure that you are specifying a style for both the form field and the title. Also text size of your title or form filed can make it look strange. If you post the html, I can tell you the exact issue.
Jason C. LevineDon't talk to me.

Commented:
We would need to see a link or the complete source code to be sure, but you probably need to zero out the table cells, not the table itself.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

There are two things that you can do:

If you are looking to reduce the spacing between each field, you will have to edit label-first for line 101 and 108 and reduce the margin.

If you are looking to reduce the spacing between the lines, you can alter line 80 for form label style.

I hope this helps!
Top Expert 2005

Commented:
@saltechsystems, that code is not the question author's.  It was an example of a pure CSS form not using a table layout.

The author is using a table layout and as I'm sure you know, the table cells can grow in ways that are not desirable, leading to the problem the author posted: "some space between fields."

It certainly isn't impossible to find a solution using table layout, (as jason1178 has offered to help with,) but it is also true that the W3C recommended not to use tables for layout in 1999, so I thought it best to show an example of how a form can be layed out without a table and offer to help the author learn to make his form layout look the way desired without using tables.

I chose that example because it covers the common issue of having different number and sizes of form fields on the various rows of the form.  It may have absolutely no resemblance to what the author is trying to accomplish.

Making suggestions based on that code is not relevant to the author's problem.

Regards,
Rod

Author

Commented:
Hi
thanks everyone for help
I am not really familiar with codes and my website is not in English
how ever I have pasted the codes here
the form name is form1 , it located on line 111 and the css is on line 84
hopefully it can help
thanks again
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/NBconnect.asp" -->
<%
// *** Edit Operations: declare variables

// set the form action variable
var MM_editAction = Request.ServerVariables("SCRIPT_NAME");
if (Request.QueryString) {
  MM_editAction += "?" + Server.HTMLEncode(Request.QueryString);
}

// boolean to abort record edit
var MM_abortEdit = false;
%>
<%
if (String(Request("MM_insert")) == "form1") {
  if (!MM_abortEdit) {
    // execute the insert
	
    var MM_editCmd = Server.CreateObject ("ADODB.Command");
    MM_editCmd.ActiveConnection = MM_NBconnect_STRING;
    MM_editCmd.CommandText = "INSERT INTO dbo.Login (Name, Surename, Relation, email, Tel, Username, Password) VALUES (?, ?, ?, ?, ?, ?, ?)";
    MM_editCmd.Prepared = true;
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param1", 202, 1, 10, Request.Form("Name"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param2", 202, 1, 15, Request.Form("Surename"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param3", 202, 1, 15, Request.Form("Relation"))); // adVarWChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param4", 201, 1, 25, Request.Form("email"))); // adLongVarChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param5", 5, 1, -1, (String(Request.Form("Tel")) != "undefined" && String(Request.Form("Tel")) != "") ? Request.Form("Tel") : null)); // adDouble
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param6", 201, 1, 15, Request.Form("Username"))); // adLongVarChar
    MM_editCmd.Parameters.Append(MM_editCmd.CreateParameter("param7", 201, 1, 8, Request.Form("Password"))); // adLongVarChar
    MM_editCmd.Execute();
    MM_editCmd.ActiveConnection.Close();

    // append the query string to the redirect URL
    var MM_editRedirectUrl = "index.asp";
    if (MM_editRedirectUrl && Request.QueryString && Request.QueryString.Count > 0) {
      MM_editRedirectUrl += ((MM_editRedirectUrl.indexOf('?') == -1) ? "?" : "&") + Request.QueryString;
    }
    Response.Redirect(MM_editRedirectUrl)
  }
}
%>
<%
var Recordset1_cmd = Server.CreateObject ("ADODB.Command");
Recordset1_cmd.ActiveConnection = MM_NBconnect_STRING;
Recordset1_cmd.CommandText = "SELECT * FROM dbo.Login";
Recordset1_cmd.Prepared = true;

var Recordset1 = Recordset1_cmd.Execute();
var Recordset1_numRows = 0;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Narjes Banoo</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-color: #FFF;
	background-image: url(image/bg3.jpg);
	background-repeat: repeat-x;
}
.oneColElsCtr #container {
	width: 850px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(image/Bg10.png);
	background-repeat: no-repeat;
}
.oneColElsCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body,td,th {
	font-family: Georgia, Times New Roman, Times, serif;
}
.Form1 {
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin: 0px;
	padding: 0px;
}
-->
</style>
<link href="Nastaliq.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
    <table width="810" border="0" cellpadding="0" cellspacing="0" class="Form1">
      <tr>
        <td height="15" align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td height="150" align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
        <td align="center" valign="middle"><p><img src="image/Text1.png" width="538" height="79" alt="¿¿¿¿ ¿¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿ ¿¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿¿¿¿¿ ¿ ¿¿¿¿¿¿¿ ¿¿¿¿¿¿¿¿ ¿¿ ¿¿¿ " /></p></td>
      </tr>
      <tr class="Form1">
        <td nowrap="nowrap" class="Form1"> &nbsp;
          <form action="<%=MM_editAction%>" method="POST" name="form1" class="Form1" id="form1">
            <table width="463" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr valign="baseline">
                <td width="224" valign="middle" class="Form1"><input type="text" name="Name" value="" size="32" /></td>
                <td width="183" align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text2.png" width="41" height="48" alt="¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Surename" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text3.png" width="90" height="52" alt="¿¿¿ ¿¿¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Relation" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text4.png" width="135" height="43" alt="¿¿¿¿¿ ¿¿¿ ¿¿ ¿¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="email" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text5.png" width="105" height="50" alt="¿¿¿ ¿¿¿¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input name="Tel" type="text" class="Form1" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text6.png" width="82" height="40" alt="¿¿¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="text" name="Username" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text7.png" width="96" height="44" alt="¿¿¿¿¿ ¿¿¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="password" name="Password" value="" size="32" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p><img src="image/Text8.png" width="66" height="40" alt="¿¿¿ ¿¿¿¿" /></p></td>
              </tr>
              <tr valign="baseline">
                <td valign="middle" class="Form1"><input type="submit" class="SmallNastaliq" value="¿¿¿ ¿¿¿¿ ¿¿" /></td>
                <td align="right" valign="middle" nowrap="nowrap" class="Form1"><p>&nbsp;</p></td>
              </tr>
            </table>
            <input type="hidden" name="MM_insert" value="form1" />
          </form>
        <p>&nbsp;</p></td>
      </tr>
      <tr>
<td align="center" valign="top"><p><img src="image/Text9.png" width="190" height="62" alt="¿¿¿¿ ¿¿ ¿¿ ¿¿¿¿ ¿¿¿ ¿¿¿ ¿¿¿¿¿¿¿ " /></p>
  <p><img src="image/Text10.png" width="509" height="76" alt="¿¿¿¿¿¿¿ ¿¿ ¿¿¿ ¿¿ ¿¿ ¿¿¿ ¿¿ ¿¿¿¿¿ ¿ ¿¿¿ ¿¿ ¿¿¿¿ ¿¿¿ ¿¿¿¿¿¿ ¿¿¿¿¿¿ ¿¿ ¿¿¿¿¿¿ ¿¿¿¿ ¿¿¿¿ ¿¿¿¿¿¿" /></p>
  <p><img src="image/Text11.png" width="53" height="77" alt="¿¿¿¿¿¿" /></p></td>
      </tr>
      <tr>
        <td height="100">&nbsp;</td>
      </tr>
    </table>
    <h1>&nbsp;</h1>
  <!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
<%
Recordset1.Close();
%>
<%
Recordset1.Close();
%>

Open in new window

Top Expert 2005

Commented:
Is the undesired space above and below the form fields or to the right of the form fields?
form1.jpg

Author

Commented:
yes the space above and under each field
but the space that we can see in this view is fine because the reason is the height of images on the right column
the problem is , while you see the form in browser spaces become more than it and the form height is different in different browsers
Top Expert 2005

Commented:
Do you have a public link?
I noticed that you have applied the .form1 class to each row in the table as well as the entire table itself. Try removing them from the individual rows.

Also, there is a great little CSS Form Designer Extension for Dreamweaver. It's free and it can help get you started.

http://www.dmxzone.com/go?16830

Check it out...

Good luck

Author

Commented:
dear rdivilbiss
sorry what's public link?
Top Expert 2005

Commented:

Author

Commented:
Hello
Sorry for late reply, I was in a trouble for a while
Dear rdivilbiss
yes this is what I need , how did you do that?
I am trying to understand something from your page codes but I'm not enough familiar with codes
Thanks
Top Expert 2005
Commented:
>yes this is what I need , how did you do that?

I just rebuilt the mark-up step by step until I had a new page.  (Basically I made an entirely new page and only added mark-up from your page as needed.)

Sometimes, you just have to start over from a blank page.

Author

Commented:
Thanks
I rebuilt the page and there isn't any additional space
I don't know how silly I spent 1 month on such a problem

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial