?
Solved

form fields lining up

Posted on 2000-03-20
2
Medium Priority
?
145 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 200 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

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

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.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…
Suggested Courses

762 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