How to make elements in a row inline in IE - html

Question

I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .

Answer 1

In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.

Answer 2

<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/