Solved

form fields lining up

Posted on 2000-03-20
2
138 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 57
Bootstrap input box width 2 33
Bootstrap 3 application structure 7 44
Apply tab index in forms 6 33
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

929 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