Forms form forms!

[ChrisML123]

Hi, I've made a form. It looks wrong. You can see it here - http://names-not-numbers.co.uk/sponsor/. Why are the radio buttons all shacked up?

 

CSS:

* {margin:0; padding:0}
.form {float:left; padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf}
.form label {float:right; width:216px; padding:10px 10px 0 0; font-weight:bold}
.form select {float:left; width:269px; margin-top:0px}
.form input {float:left; margin-top:0px}
.form .submit {clear:both}
#msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px}
#msgcontent {display:block; background:#f3e6e6; border:2px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}

 

HTML:

<form name="form" id="form" class="form" action="payment.php" onsubmit="return validate(this)" method="post">
<table width="485"  border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="216" align="right"><label for="name">Full Name:</label></td>
    <td width="269"><input type="text" name="name" id="name" /></td>
  </tr>
  <tr>
    <td width="216" align="right"><label for="email">Email Address:</label></td>
    <td width="269"><input type="text" name="email" id="email" /></td>
  </tr>  
  <tr>
    <td width="216" align="right"><label for="address">First line of address:</label></td>
    <td width="269"><input type="text" name="address" id="address" /></tr>
  <tr>
    <td align="right"><label for="address2">Second line of address:</label></td>
    <td><input type="text" name="address2" id="address2" />  
  </tr>
  <tr>
    <td align="right"><label for="city">City:</label></td>
    <td><input type="text" name="city" id="city" />  
  </tr>
  <tr>
    <td align="right"><label for="county">County:</label></td>
    <td><input type="text" name="county" id="county" />  
  </tr>
  <tr>
    <td align="right"><label for="postcode">Postcode:</label></td>
    <td><input type="text" name="postcode" id="postcode" />  
  </tr>
  <tr>
    <td align="right"><label for="giftaid">Are you eligible to pay gift aid?</label></td>
    <td><input type="radio" name="giftaid" value=1 checked> Yes
    <input type="radio" name="giftaid" value=0 checked> No
    <br>  
  </tr>  
  <tr>
    <td align="right">Payment method</td>
    <td><input type="radio" name="payment" value="online" checked> Online Payment 
    <input type="radio" name="payment" value="cheque" checked> Cheque 
    <input type="radio" name="payment" value="cash" checked> Cash 
  </tr>
  <tr>
    <td colspan="2">     </td>
  </tr>
</table>  

 

And yes, i know theres no submit so far.

[My220x]

I am guessing you fixed it as on your site it looked fine, for those who can't spot the problem it's because he was floating his inputs to the left.

[ram4nd]

<form name="form" id="form" class="form" action="payment.php" onsubmit="return validate(this)" method="post">
<table width="485"  border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td width="216" align="right"><label for="name">Full Name:</label></td>
    <td width="269"><input type="text" name="name" id="name" /></td>
  </tr>
  <tr>
    <td width="216" align="right"><label for="email">Email Address:</label></td>
    <td width="269"><input type="text" name="email" id="email" /></td>
  </tr> 
  <tr>
    <td width="216" align="right"><label for="address">First line of address:</label></td>
    <td width="269"><input type="text" name="address" id="address" /></tr>
  <tr>
    <td align="right"><label for="address2">Second line of address:</label></td>
    <td><input type="text" name="address2" id="address2" /> 
  </tr>
  <tr>
    <td align="right"><label for="city">City:</label></td>
    <td><input type="text" name="city" id="city" /> 
  </tr>
  <tr>
    <td align="right"><label for="county">County:</label></td>
    <td><input type="text" name="county" id="county" /> 
  </tr>
  <tr>
    <td align="right"><label for="postcode">Postcode:</label></td>
    <td><input type="text" name="postcode" id="postcode" /> 
  </tr>
  <tr>
    <td align="right"><label for="giftaid">Are you eligible to pay gift aid?</label></td>
    <td><input type="radio" name="giftaid" value=1 checked> Yes
    <input type="radio" name="giftaid" value=0 checked> No
    <br> 
  </tr> 
  <tr>
    <td align="right" valign="top">Payment method</td>
    <td><input type="radio" name="payment" value="online" checked> Online Payment 
    <input type="radio" name="payment" value="cheque" checked> Cheque 
    <input type="radio" name="payment" value="cash" checked> Cash 
  </tr>
  <tr>
    <td colspan="2">     </td>
  </tr>
</table>

[Yesideez]

Everything looks fine to me (Firefox 3, XP Pro)

 

Gotta say I like your menu tho!

[[-_-]]

What do you mean by shacked up?  ??? Looks fine to me.

[nadeemshafi9]

.containerclass radio {

padding-right: 10px;

}

 

or

 

#formid radio {

padding-right: 10px;

}