[SOLVED] i cant get this form to line up properly...

[tefuzz]

i have a form...i have it styled using css, however my buttons always line up on the far right no matter what i change...as well, i have a label that is right up against a textarea, but the other labels are spaced fine...can somebody take a look, i think i just need a second set of eyes now.

 

 

only the relevant code is shown here...

 

<style>
#contactUs {
margin: 0 auto 30px;
padding: 0px;
height: auto;
width: 845px;
text-align: left;
}

#contactUs #leftCol {
height: auto;
width: 425px;
text-align:left;
float: left;
background-color: #F0E8CE;
margin: 0 auto 30px;
}

#contactUs #rightCol {
float: right;
width: 420px;
text-align: left;
right: 0px;
background-color: #F0E8CE;
margin: 0 auto 30px;
}

#contactUs .Row {
clear: both;
width: 845px;
height:auto;
background-color: #F0E8CE;
}

#contactForm {
/*border:solid 2px  #BFB18F;*/
background:#F0E8CE ;
font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px;
text-align: left;
}

#contactForm h1 {
margin-bottom: 5px;
font-size:14px;
font-weight:bold;
color: #546666;
}


#contactForm p{
font-size:11px;
color:#789090;
margin-bottom:5px;
border-bottom:solid 1px #ffffff;
padding-bottom:5px;
}

#contactForm label{
display:block;
    font-weight:bold;
text-align:right;
width:140px;
float:left;
margin-top: 10;
}


#contactForm .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}

#contactForm text {
float:left;
font-size:12px;
padding: 2px 4px;
border:solid 1px #aacfe4;
width:150px;
margin:2px 0 10px 5px;
}

#contactForm textarea {
float:left;
font-size:12px;
padding: 2px 4px;
border:solid 1px #aacfe4;
cols: 45;
rows: 10;
margin:5px 0 10px 5px;
}


#contactForm radio {
float:left;
font-size:12px;
padding: 2px 4px;
border:solid 1px #aacfe4;
width:50px;
margin:2px 0 10px 5px;
}



#contactForm button{ 
width:75px;
height:25px;
text-align:center;
line-height:25px;
color:#546666;
font-size:12px;
font-weight:bold;
font-size:12px;
padding:0;
border:solid 1px #aacfe4;
margin:2px 0 5px 0;
}


</style>
<div id="contactUs"> <!-- beginning of the contact us page code -->
  <div class="Row"><!-- top row-->
  </div><!--top row-->
  <div id="leftCol" class="myform"><!-- left column-->
    <div id="contact">
  <form name="ContactUs" class="contactForm">
      <label>Full Name <span class="small">first & last</span></label>
      <input name="fname" type="text" id="fname" tabindex="1" dir="ltr" lang="en" maxlength="65" />
      
      <label>Email Address <span class="small">your@email.com</span></label>
      <input name="email" type="text" id="email" tabindex="2" dir="ltr" lang="en" maxlength="65" />  
      
      <label>Telephone <span class="small">xxx-xxx-xxxx</span></label>
      <input name="phone" type="text" id="lname" dir="ltr" lang="en" maxlength="12" /> 

      <label>Comments&<span class="small">or questions?</span></label>
	 <textarea name="comments" cols="30" rows="7" tabindex="4"></textarea>
    <input type='hidden' name='sub' /> <!-- make sure form is posted -->
    <button  type="reset">Clear</button> <button  type="submit">Submit</button> 
  </form>

[DamienRoche]

Note, tables do still have their use and this is one of those cases. Tables are perfect for form layout.

 

Just wrap the entire form in <table> </table>

 

with each row use:

 

<tr><td>Field Id: </td><td><input/></td></tr>

 

That will keep everything flowing smooth.

 

Hope that helps.

[tefuzz]

I added everything to a table, now it all lines up properly but i am having a problem getting  the label font size to appear properly...i have both forms on the same page, one inside a table and one outside (for testing purposes) now the form inside the table is displaying the label font size as about 14, where it is clearly set to 12 within the CSS. the form outside the tables is displaying fine...any ideas?

[tefuzz]

I fixed it...thanks for the help