Hello,
I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE.
If you look at the code the three <td class=“td_spacer”> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below.
I hope someone can help me make sense of this.
form{
display:block;
width:566px;
margin:0px;
padding:0px;
}
#form_table{
border-style:solid;
border-color:black;
border-width:thin;
border-spacing:0px;
border-collapse: collapse;
float:right;
width:564px;
margin:0px 0px 50px 0px;
padding:0px;
}
#form_table thead tr{
color:white;
text-align:left;
background-color:#1B1B1B;
border:solid black thin;
}
#form_table tbody tr td{
float:right;
display:block;
}
#country_list{
list-style-type:none;
margin:0px;
padding:5px 0px 0px 0px;
}
.td_spacer{
display:block;
margin:0px;
padding:10px 0px 0px 0px;
}
.input{
width:300px;
}
#message_box{
width:558px;
height:286px;
}
<form name="jobs" action="php/rtProcessor.php" method="post">
<table id="form_table" summary="post form">
<thead>
<tr>
<th><span class="">Post</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="float:left;">
<ul id="country_list">
<li id="china"><input type="radio" name="color" value="red" />red</li>
<li id="japan"><input type="radio" name="color" value="green" />green</li>
<li id="korea"><input type="radio" name="color" value="blue" />blue</li>
<li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
<li id="other"><input type="radio" name="color" value="Other" />Other</li>
</ul>
</td>
<td class="td_spacer">
<label for="companyname">Company Name:</label>
<input type="text" id="companyname" name="companyname" class="input" />
</td>
<td class="td_spacer">
<label for="email">E-Mail Address:</label>
<input type="text" id="email" name="email" class="input" />
</td>
<td class="td_spacer">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="input" />
</td>
</tr>
<tr>
<td>
<label for="message">Listing:</label>
<textarea id="message_box" name="message" rows="16" cols="67"></textarea>
</td>
</tr>
<tr>
<td>
<label for="hii">1+1 is?</label>
<input type="text" id="hii" name="hii" class="input" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="submit" />
</td>
</tr>
</tbody>
</table>
</form>