Tras mi larga ausencia por el foro, he welto, con mis típicas preguntitas jejejeje.
Ésta vez, es referida a la correcta colocación de un tag de formulario <FORM>, dentro de una página HTML (con sus respectivas tablas y demás).
Como todos sabemos, el mal posicionamiento de este tag, nos genera, en IE, un estiramiento de nuestra tabla (deja como aire, hueco).
Os lo comento mejor con un ejemplo:
Código:
En el código de arriba, tenemos una tabla, que contiene otras tablas y entre todo ello, hay un formulario (de un buscador).<table cellpadding="0" cellspacing="0" style="width:762px;background-color:#F2F2F2" border="0" align="right"> <tr> <td colspan="3"style="width:762;height:14px" class="sp"> </td> </tr> <tr> <td style="width:10px" class="sp"> </td> <td style="width:328px" class="sp" valign="top" align="left"><img src="../../img/logo.gif" width="230" height="45" alt=""></td> <td style="width:424px" class="sp"> <table cellpadding="0" cellspacing="0" style="width:424px" border="0"> <tr> <td style="width:12px" class="sp"> </td> <td style="width:400px" class="sp"> <table cellpadding="0" cellspacing="0" style="width:400px" border="0"> <!-- Menú recursivo --> <tr> <td style="width:400px" class="a11_999999" align="right" valign="top"><a href="javascript:void(null)" class="a11_999999">FAQs</a> <span style="color:#000000">|</span> <a href="javascript:void(null)" class="a11_999999">Atención al Cliente</a> <span style="color:#000000">|</span> <a href="javascript:void(null)" class="a11_999999">Política de Privacidad</a></td> </tr> <!-- Fin del Menú recursivo --> <tr> <td style="width:400px;height:7px" class="sp"> </td> </tr> <!-- Buscadores --> <tr> <td style="width:400px;height:34px" class="sp" align="left" valign="top"> <form name="buscador" action="javascript:void/null)" method="post"> <table cellpadding="0" cellspacing="0" style="width:400px" border="0"> <tr> <td style="width:175px" align="left" valign="top"><select name="datos[servicio]" style="width:171px;height:18px;font-family:Arial;font-size:11px;text-decoration:none;color:#000000;border: 1px solid #9C9C9C;background-color: #FFFFFF;cursor:pointer"><option value="Seleccione un servicio">Seleccione un servicio</option></select></td> <td style="width:48px;" align="left" valign="middle"><input type="Button" name="ver" value="Ver" style="width:37px;height:18px;background-color:#7F7F7F;font-family:Arial;font-size:11px;text-decoration:none;color:#CCCCCC;border: 1px solid #9C9C9C;cursor:pointer"></td> <td style="width:140px" align="left" valign="top"><input type="text" value="Código de cliente" style="width:136px;height:20px;border:1px solid #9C9C9C;font-family:Arial;font-size:11px;text-decoration:none;color:#000000;border: 1px solid #9C9C9C;background-color: #FFFFFF;padding-left:4px;padding-top:2px"></td> <td style="width:37px;" align="left" valign="middle"><input type="Button" name="entrar" value="Entrar" style="width:37px;height:18px;background-color:#7F7F7F;font-family:Arial;font-size:11px;text-decoration:none;color:#CCCCCC;border: 1px solid #9C9C9C;cursor:pointer"></td> </tr> </table> </form> </td> </tr> <!-- Fin de los Buscadores --> </table> </td> <td style="width:12px" class="sp"> </td> </tr> </table> </td> </tr> </table>
Como está puesto, si nos vamos al Validador de HTML de la W3c, es totalmente correcto... PERO..... so se adecua al diseño original. ¿porque?....
Porque por debajo de los elementos del formulario (en vista web) debería de haber 20 px de altura hasta que termina la tabla, y hay casi el doble (generado por los tag de formulario).
Si los tag de formulario los coloco en algún otro lugar (ya lo he probado) evitamos este salto de línea, PERO... el validador de HTML de la W3C... nos dice que es erróneo el posicionamiento del Tag FORM....
No se si esque desconozco algo sobre este tema de ubicación y contenedores de TAG's.. si alguien puede ayudarme, le estaría muy agradecido.
Espero vuestras opiniones, contestaciones, críticas o recomendaciones.
Un saludo compañer@s.
Javi
¡Je, je!)
