Solved

forms spacing

Posted on 2000-04-14
8
154 Views
Last Modified: 2010-04-09
given the html below, how do i get the check boxes to be closer together vertically?

<html>
<head>
<title>forms - miscellaneous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:550px; height:260px; z-index:1; left: 98px; top: 31px">
  <table width="533" border="0" cellspacing="0" cellpadding="0" height="392">
    <tr>
      <td>
        <form name="form1" >
          <input type="checkbox" name="checkbox" value="checkbox">
          box1
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form2" >
          <input type="checkbox" name="checkbox2" value="checkbox">
          box 2
</form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form3" >
          <input type="checkbox" name="checkbox3" value="checkbox">
          box3
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form4" >
          <input type="checkbox" name="checkbox4" value="checkbox">
          box4
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form5" >
          <input type="checkbox" name="checkbox5" value="checkbox">
          box5
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form6" >
          <input type="checkbox" name="checkbox6" value="checkbox">
          box6
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form7" >
          <input type="checkbox" name="checkbox7" value="checkbox">
          box7
        </form>
      </td>
    </tr>
  </table>
</div>

<div id="Layer2" style="position:absolute; width:558px; height:45px; z-index:2; left: 98px; top: 441px">
  <form name="form8" >
    <input type="submit" name="Submit" value="Get Forms">
    <input type="reset" name="Submit2" value="Reset">
  </form>
</div>
</body>
</html>
0
Comment
Question by:jdaues
  • 4
  • 4
8 Comments
 
LVL 11

Accepted Solution

by:
thunderchicken earned 50 total points
Comment Utility
use td height...

---------------------------------------
<html>
<head>
<title>forms - miscellaneous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:550px; height:260px; z-index:1; left: 98px; top: 31px">
  <table width="533" border="0" cellspacing="0" cellpadding="0" height="392">
    <tr>
      <td>
        <form name="form1" >
          <input type="checkbox" name="checkbox" value="checkbox">
          box1
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form2" >
          <input type="checkbox" name="checkbox2" value="checkbox">
          box 2
</form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form3" >
          <input type="checkbox" name="checkbox3" value="checkbox">
          box3
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form4" >
          <input type="checkbox" name="checkbox4" value="checkbox">
          box4
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form5" >
          <input type="checkbox" name="checkbox5" value="checkbox">
          box5
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form6" >
          <input type="checkbox" name="checkbox6" value="checkbox">
          box6
        </form>
      </td>
    </tr>
    <tr>
      <td>
        <form name="form7" >
          <input type="checkbox" name="checkbox7" value="checkbox">
          box7
        </form>
      </td>
    </tr>
  </table>
</div>

<div id="Layer2" style="position:absolute; width:558px; height:45px; z-index:2; left: 98px; top: 441px">
  <form name="form8" >
    <input type="submit" name="Submit" value="Get Forms">
    <input type="reset" name="Submit2" value="Reset">
  </form>
</div>
</body>
</html>
0
 
LVL 11

Expert Comment

by:thunderchicken
Comment Utility
sorry... pasted the wrong thing  =)

<html>
<head>
<title>forms - miscellaneous</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position: absolute; width: 550; height: 171; z-index: 1; left: 98; top: 31">
  <table width="533" border="0" cellspacing="0" cellpadding="0" height="148">
    <tr>
      <td height="22">
        <form name="form1" >
          <input type="checkbox" name="checkbox" value="checkbox">
          box1
        </form>
      </td>
    </tr>
    <tr>
      <td height="26">
        <form name="form2" >
          <input type="checkbox" name="checkbox2" value="checkbox">
          box 2
</form>
      </td>
    </tr>
    <tr>
      <td height="19">
        <form name="form3" >
          <input type="checkbox" name="checkbox3" value="checkbox">
          box3
        </form>
      </td>
    </tr>
    <tr>
      <td height="17">
        <form name="form4" >
          <input type="checkbox" name="checkbox4" value="checkbox">
          box4
        </form>
      </td>
    </tr>
    <tr>
      <td height="16">
        <form name="form5" >
          <input type="checkbox" name="checkbox5" value="checkbox">
          box5
        </form>
      </td>
    </tr>
    <tr>
      <td height="24">
        <form name="form6" >
          <input type="checkbox" name="checkbox6" value="checkbox">
          box6
        </form>
      </td>
    </tr>
    <tr>
      <td height="24">
        <form name="form7" >
          <input type="checkbox" name="checkbox7" value="checkbox">
          box7
        </form>
      </td>
    </tr>
  </table>
</div>

<div id="Layer2" style="position:absolute; width:558px; height:45px; z-index:2; left: 98px; top: 441px">
  <form name="form8" >
    <input type="submit" name="Submit" value="Get Forms">
    <input type="reset" name="Submit2" value="Reset">
  </form>
</div>
</body>
</html>


0
 

Expert Comment

by:we_evil
Comment Utility
this doesn't work for text fields, neither does absheight.

five points down the tube :(

0
 
LVL 11

Expert Comment

by:thunderchicken
Comment Utility
what's wrong?  maybe i can help
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Expert Comment

by:we_evil
Comment Utility
ok thanks,

i have a background graphic and want to overlay form fields in a new layer on top that line up with the horizontal strips on the image:

it works for text/graphics, etc but the text fields have a larger space underneath that i can't find a tag for:

example row
<tr>

  <td width="27%" absheight="36" valign="top" align=left>
   <font face="Helvetica" size="+1" color="#101010" >van</font>
  </td>
 
  <td width="75%" absheight="36" valign="center">
   
     <form action="url">
    <input type="text" name="textfield3" size="30" value="janjansen@chello.nl">
</form>

  </td>
 </tr>  
0
 

Expert Comment

by:we_evil
Comment Utility
ok thanks,

i have a background graphic and want to overlay form fields in a new layer on top that line up with the horizontal strips on the image:

it works for text/graphics, etc but the text fields have a larger space underneath that i can't find a tag for:

example row
<tr>

  <td width="27%" absheight="36" valign="top" align=left>
   <font face="Helvetica" size="+1" color="#101010" >van</font>
  </td>
 
  <td width="73%" absheight="36" valign="top">
   
     <form action="url">
    <input type="text" name="textfield3" size="30" value="janjansen@chello.nl">
</form>

  </td>
 </tr>  
0
 
LVL 11

Expert Comment

by:thunderchicken
Comment Utility
Well, the only reason I can think of is cellspacing="0" cellpadding="0", which should help, but it may be browser dependent, but I really honestly don't know.
0
 

Expert Comment

by:we_evil
Comment Utility
yes i,ve done that
thanks anyway
no problem
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 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

11 Experts available now in Live!

Get 1:1 Help Now