Estoy haciendo un formulario y llegué a una parte en donde no encuentro solución para cuadrar un pequeño detalle.
Quiero que el texto "bla bla blab bla..." quede en la parte superior, y el botón de enviar en la parte inferior.
El siguiente código se ve así como lo quiero en IE, FF, Opera y Safari; pero desgraciadamente IE descuadra el área de texto y el menú desplegable dividiéndolos en dos celdas de igual altura (qué cosa tan extraña).
Código HTML:
<table border="0" style="margin-left:10px; margin-top:10px;"> <tr valign="middle"> <td rowspan="3" valign="middle"> <table cellpadding="2" cellspacing="0" border="0"> <tr valign="middle"> <td><font face="tahoma" size="2" color="#000000"><b>Nombre:</b></font></td> <td> <input type="text" name="FieldData0" value="" maxlength="100" size="30"/> </td> </tr> <tr valign="middle"> <td><font face="tahoma" size="2" color="#000000"><b>Empresa:</b></font></td> <td> <input type="text" name="FieldData1" value="" maxlength="100" size="30"/> </td> </tr> <tr valign="middle"> <td><font face="tahoma" size="2" color="#000000"><b>Ciudad:</b></font></td> <td> <input type="text" name="FieldData2" value="" maxlength="100" size="30"/> </td> </tr> <tr valign="middle"> <td><font face="tahoma" size="2" color="#000000"><b>Correo:</b></font></td> <td> <input type="text" name="FieldData3" value="" maxlength="100" size="30"/> </td> </tr> <tr valign="middle"> <td><font face="tahoma" size="2" color="#000000"><b>Teléfono:</b></font></td> <td> <input type="text" name="FieldData4" value="" maxlength="100" size="30"/> </td> </tr> </table> </td> <td align="center" valign="top" height="20px"> <select name="FieldData5"> <option>uno</option> <option value="dos">dos</option> <option value=" tres"> tres</option><option value=" cuatro"> cuatro</option></select> </td> <td align="justify" valign="top" rowspan="2" width="130px"> Bla bla bla bla bla bla bla bla blaa... </td> </tr> <tr> <td valign="bottom" rowspan="2"><textarea name="FieldData6" cols="31" rows="6"></textarea></td> </tr> <tr> <td align="center" valign="bottom" width="130px"> <input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"/> <input type="submit" class="btn" value="Enviar" name="Submit"/><br/></td> </tr> </table>
Intenté resolverlo anidando otra tabla ahí, pero entonces igual no puedo hacer que el texto quede arriba y el botón abajo (que es lo que quiero).
¿Alguna idea? Gracias por la ayuda.