Solved

form fields lining up

Posted on 2000-03-20
2
143 Views
Last Modified: 2010-04-09
In the code below - does anyone know how I can get the left and right hand
margins to be justified evenly - when I play with the field size attritubtes it turns into a nightmare -

Thanks

Kevin

<html>
<form>
<table width="87%" border="0" cellpadding="1">


<tr>
    <td><font size=-1><b>Card Number:</b>
    <input name="card_num" size=20 align="right"></font>

    <font size=-1><b>Expiration Date:</b>
    <input name="expir_num" size=11 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Cardholder Name:</b>
    <input name="cardh_name" size=44 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Signature:</b>
    <input name="signer" size=51 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Contact Name:</b>
    <input name="conct_name" size=47 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Company Name:</b>
    <input name="comp_name" size=46 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Address:</b>
    <input name="address" size=53 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>City:</b>
    <input name="city" size=25>

     <b>State:<b> <input name="state" size=8>

     <b>Zip:</b> <input name="zip" size=10 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Phone Number:</b>
    <input name="phone_num" size=22>

    <b>Fax:</b><input name="fax" size=20 align="right"></td>
</tr>

<tr>
    <td><font size=-1><b>Compliance Officer:</b>
    <input name="comp_off" size=43 align="right"></td>
</tr>

<tr>
    <td><font size=-1><b>E-mail:</b>
    <input name="email" size=55 align="right"></td>
</tr>
</table>
</form>
</html>
0
Comment
Question by:kpu8
[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
2 Comments
 
LVL 1

Accepted Solution

by:
tarassov earned 50 total points
ID: 2637000
Well, as I have understood your problem - it's kind of impossible to solve it - to get what you want, as I imagine it. You want to have even margins everywhere: in the left, in the middle and in the right. But there are some lines, where there are two or even three fields. I have provided a code to align some fields:

<html>
<form>
<table width="87%" border="0" cellpadding="1">

<tr>
    <td><font size=-1><b>Card Number:</b>
    <TD><input name="card_num" size=20 align="right"></font>

    <font size=-1><b>Expiration Date:</b>
    <input name="expir_num" size=11 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Cardholder Name:</b>
    <TD><input name="cardh_name" size=40 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Signature:</b>
    <TD><input name="signer" size=40 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Contact Name:</b>
    <TD><input name="conct_name" size=40 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Company Name:</b>
    <TD><input name="comp_name" size=40 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Address:</b>
    <TD><input name="address" size=40 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>City:</b>
    <TD><input name="city" size=25>

<font size=-1><b>State:<b> <input name="state" size=8>

<font size=-1><b>Zip:</b> <input name="zip" size=10 align="right"></font></td>
</tr>

<tr>
    <td><font size=-1><b>Phone Number:</b>
    <TD><input name="phone_num" size=22>

<font size=-1><b>Fax:</b><input name="fax" size=20 align="right"></td>
</tr>

<tr>
    <td><font size=-1><b>Compliance Officer:</b>
    <TD><input name="comp_off" size=40 align="right"></td>
</tr>

<tr>
    <td><font size=-1><b>E-mail:</b>
    <TD><input name="email" size=40 align="right"></td>
</tr>
</table>
</form>
</html>

As you can see, fields are aligned and margins are even, BUT only there where it is only one field in a line. You can't align lines where there are several fields, because different users have different font settings (font itself and its size) and what looks like aligned and even on your screen, may appear to look different on another.

Maybe you should place every field on a separate line? And then playing with align properties and sizes you can make all the margins even.

Andrey
0
 
LVL 1

Author Comment

by:kpu8
ID: 2637230
Thanks - that helped a bunch -
I wasn't 100% sure on a few of the issues you addressed -  

0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
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).

690 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