form header align problem?

liunx

Guest
Hi...my .formheader will not align to the right properly in IE but ok in other browsers..........havent missed any margins or element styles i dont think...............worked perfectly well in other sites with similar coding!!??

PLease help!!

HTML

<form name="contact_form" action="http://www.rootsgardens.co.uk/cgi-bin/formmailer.cgi" method="post" onsubmit="return validate_contact ( );">
<table width="285" cellpadding="1" cellspacing="0" border="0" >
<tr><td class="formheader">title</td><td width="165"><select name="title" tabindex="1"><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Miss">Miss</option><option value="Ms">Ms</option><option value="Dr">Dr</option><option value="Sir">Sir</option></select></td></tr>
<tr><td class="formheader"><span class="white">* </span>first name</td><td width="165"><input type="text" name="first_name" class="formbox" size="12" tabindex="2" /></td></tr>
<tr><td class="formheader"><span class="white">* </span>surname</td><td width="165"><input type="text" name="surname" class="formbox" size="12" tabindex="3" /></td></tr>
<tr><td class="formheader"><span class="white">* </span>telephone</td><td width="165"><input type="text" name="telephone" class="formbox" size="12" tabindex="4" /></td></tr>
<tr><td class="formheader">email</td><td width="165"><input type="text" name="email" class="formbox" size="12" tabindex="5" /></td></tr>
<tr><td> </td><td width="165" ><textarea name="enquiry" cols="19" rows="5" class="enquiry" tabindex="6" >your message..</textarea></td></tr>
<tr><td> </td><td><input type="submit" value="send" name="send" class="formbox2" style="CURSOR: hand" title="submit enquiry form" tabindex="7" /> <input type="reset" value="reset" class="formbox2" style="CURSOR: hand" title="reset enquiry form" tabindex="8" /></td></tr>
</table>
</form>



CSS

table { width: 350px; margin: 5px 0 0 0; padding: 0; border: none; float: left; background: red;}
tr { margin: 2px 0 0 0; }
.formheader { width: 107px; text-align: right; margin: 0; padding: 0; font-size: 8pt; color: white; background: green; }
.formbox { width: 165px; height: 15px; margin: 0; padding: 0; border: 1px solid #cccccc; color: #006600; background: white; font-size: 8pt; }
.formbox2 { width: 30px; color: #009900; background: white; font-size: 8pt; margin: 2px 10px 0 0; border: 1px solid #009900; }
.enquiry { width: 165px; height: 50px; margin: 0; color: #006600; background: white; border: 1px solid #cccccc; font-size: 8pt; }
option { color: #006600; background: white; margin: 0; padding: 0;}
select { height: 15px; margin: 0; padding: 0; font-size: 8pt; }
form { margin: 0; padding: 0; }
.white { color: white; font-weight: bold; background: transparent; }


Thanks !Works ok for me. Can you post a link?Hello
Firstly you have a form inside a table, which is not recommended but it's your site, so the code should be
<table>
<form>
</form>
</table>
Secondly why do you have span tags in your html when you have the CSS already set up?
This is what I have and it seems to work in FF and IE7

<table cellpadding="1" cellspacing="0" border="0">
<tr>
<td class="formheader">title</td>
<td>
<form name="contact_form" action="http://www.rootsgardens.co.uk/cgi-bin/formmailer.cgi" method="post" onsubmit="return validate_contact();">
<select name="title" tabindex="1">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Sir">Sir</option>
</select>
</td>
</tr>
<tr>
<td class="formheader">* first name</td>
<td><input type="text" name="first_name" class="formbox" size="12" tabindex="2" /></td>
</tr>
<tr>
<td class="formheader">* surname</td>
<td><input type="text" name="surname" class="formbox" size="12" tabindex="3" /></td>
</tr>
<tr>
<td class="formheader">* telephone</td>
<td><input type="text" name="telephone" class="formbox" size="12" tabindex="4" /></td>
</tr>
<tr>
<td class="formheader">email</td>
<td><input type="text" name="email" class="formbox" size="12" tabindex="5" /></td>
</tr>
<tr>
<td> </td>
<td><textarea name="enquiry" cols="19" rows="5" class="enquiry" tabindex="6" >your message..</textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="send" name="send" class="formbox2" style="CURSOR: hand" title="submit enquiry form" tabindex="7" /> <input type="reset" value="reset" class="formbox2" style="CURSOR: hand" title="reset enquiry form" tabindex="8" /></td>
</tr>
</form>
</table>
 
Back
Top