Por qué se desplazan los campos a la derecha cuando hay un error?

[Windu]

Tengo este código en una página JSP:

Código HTML:

<html:form action="/recuperarPassword">
 
            <table border="0">
                <tbody>
                    <tr>
                        <td colspan="2"><bean:write name="ModificarPasswordForm" property="mensaje" filter="false"/>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Contraseña antigua</td>
                        <td><html:password property="password"/></td>
                    </tr>
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><html:password property="passwordNueva"/></td>
                    </tr>
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><html:password property="passwordNueva2"/></td>
                    </tr>
                </tbody>
            </table>
 
        <html:submit value="Cambiar" />
        
        </html:form>
 

Como veis, cuando se produce un error, se escribe desde el bean un mensaje en la página web para que el usuario reintente la operación. Pues bien, todo funciona perfectamente salvo que los tres campos html se desplazan a la derecha varios centímetros cada vez que el usuario yerra en las acciones (introduce mal su password actual, las contraseñas nuevas no coinciden o no son alfanuméricas, etc.). A qué se puede deber esto?

Gracias!

[Xerelo]

Lo primero que tienes que hacer es ver el codigo HTML que se te genera, así sabrás exactamente qué produce el desfase, y de esa forma es más fácil saber por qué pasa.

También es importante comprobarlo con varios navegadores, ya que los navegadores no interpretan las cosas igual, y lo que en uno se ve bien, en otro puede dar problemas.

Una vez que identifiques el problema, para solucionarlo podrás hacerlo mediante css, javascript o con órdenes específicas para un navegador.

Para pelear con HTML y CSS, e incluso javascript, te recomiendo que uses el plugin FireBug de Firefox. Chrome también tiene un modo de depuración muy bueno.

[Windu]

Hola Xerelo, gracias como siempre por tu respuesta!

No logro ver lo que sucede, he aquí el código HTML generado ANTES de hacer el SUBMIT:

Código HTML:

<form name="ModificarPasswordForm" method="post" action="/gestion-horas-empresa/recuperarPassword.do">
 
            <table border="0">
 
                <tbody>
                    <tr>
                        <td colspan="2">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Contraseña antigua</td>
                        <td><input type="password" name="password" value=""></td>
                    </tr>
 
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><input type="password" name="passwordNueva" value=""></td>
                    </tr>
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><input type="password" name="passwordNueva2" value=""></td>
                    </tr>
 
                </tbody>
            </table>
 
        <input type="submit" value="Cambiar">
        
        </form>
 

He aquí el generado DESPUÉS de hacer el SUBMIT:

Código HTML:

<form name="ModificarPasswordForm" method="post" action="/gestion-horas-empresa/recuperarPassword.do">
 
            <table border="0">
 
                <tbody>
                    <tr>
                        <td colspan="2"><span style='color:red'>Las contraseñas nuevas no coinciden. Repita la operación.</span>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>Contraseña antigua</td>
                        <td><input type="password" name="password" value="02468"></td>
                    </tr>
 
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><input type="password" name="passwordNueva" value="12345"></td>
                    </tr>
                    <tr>
                        <td>Nueva contraseña</td>
                        <td><input type="password" name="passwordNueva2" value="1234"></td>
                    </tr>
 
                </tbody>
            </table>
 
        <input type="submit" value="Cambiar">
        
        </form>
 

Los campos input, después de hacer el submit, aparecen desplazados varios centímetros a la derecha sin motivo aparente.

Un saludo y gracias!

[Xerelo]

Como puedes ver la única diferencia que hay entre uno y otro, es el texto que añades

Las contraseñas nuevas no coinciden. Repita la operación.

Juntas dos celdas, y el resto de la tabla se tiene que distribuir para ocupar el mismo espacio que la celda superior.

Solución, dale tamaño fijo a la inferior (nombre del campo).

Si tienes que trabajar con interfaces web, java te facilita las cosas, pero necesitas conocer HTML y CSS. Para mí es la parte más aburrida y posiblemente más desesperante. Para estas cosas te podrán ayudar mejor en
http://www.forosdelweb.com/f36/

Una cosa, el maquetado mediante tablas es algo que ahora mismo no tiene muchos fans.

Artículo largo explicando los distintos usos

http://www.smashingmagazine.com/2009...l-to-div-hell/

[Windu]

Grande Xerelo!

He sacado el mensaje fuera de la tabla y funciona perfectamente!

Muchas gracias como siempre.