[Ovillo] más sobre formularios

Vie Abr 13 09:52:47 UTC 2007

salud!

al igual que silvia yo también me estoy peleando con la maquetación de los
formularios en css.
siguiendo alguno de los enlaces que pasásteis, me he construido uno,
procurando hacerlo accesible, utilizando tags cómo fieldset, legend,
label...
sin embargo, el resultado final varía de considerablemente de un navegador a
otro.
contrariamente a lo ke es pasa normalmente, ésta vez ie6 hace algunas cosas
mejor ke firefox.
pego el código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Servicio de postales </title>

                <style>
form.formulario_envio {
margin:0px auto;
width:400px;
text-align:center;
}
form.formulario_envio legend {
  padding: 0 2px;
  font-weight: bold;
}
form.formulario_envio label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
}
form.formulario_envio fieldset ol {
  margin: 0;
  padding: 0;
}
form.formulario_envio fieldset li {
  list-style: none;
  padding: 5px;
  margin: 0;
}
form.formulario_envio fieldset fieldset {
  border: none;
  margin: 3px 0 0;
}
form.formulario_envio fieldset fieldset legend {
  padding: 0 0 5px;
  font-weight: normal;
}
form.formulario_envio fieldset fieldset label {
  display: block;
  width: auto;
}
form.formulario_envio em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}
form.formulario_envio label {
  width: 140px; /* Width of labels */
}
form.formulario_envio fieldset fieldset label {
  margin-left: 1623px; /* Width plus 3 (html space) */
}

                </style>
                </head>

                <body>

<form action="enviopostal.php" method="post" class="formulario_envio">
        <fieldset>
                <legend>Datos personales</legend>
                <ol>
                        <li><label for="email_destinatario">Email
destinatario </label><input type="Text" name="email_destino" size="20"
maxlength="50" value="x"></li>
                        <li><label for="destinatario">Nombre destinatario
</label><input type="Text" name="nombre_destino" size="20" maxlength="50"
value="x"></li>
                        <li><label for="email_remitente">Email remitente
</label><input type="Text" name="email_origen" size="20" maxlength="50"
value="x"></li>
                        <li><label for="remitente">Nombre remitente
</label><input type="Text" name="nombre_origen" size="20" maxlength="50"
value="x"></li>
                </ol>
        </fieldset>

        <fieldset>
                <legend>Comprobación recepción</legend>
                <p class="checkbox"><input type="Checkbox" name="avisar" <?
echo $variables_formulario[4]; ?>Quiero ser avisado de la
recepci&oacute;n</p>
        </fieldset>

        <fieldset>
                <legend>Cuerpo del mensaje</legend>
                <p>Texto de la postal</p>
                <textarea name="texto" cols="40" rows="6"></TEXTAREA>
        </fieldset>

    <p><input type="Submit" value="Enviar" name="enviar">
&nbsp;&nbsp;&nbsp;<INPUT type="Submit" value="Ver postal" name="ver"></p>
</form>

</body>
</html>

cómo véis, son bastante diferentes, dependiendo del navegador.
lo que más me preocupa es el hecho de que los inputs, en firefox, no queden
alineados.
no entiendo porque no lo hacen ya que el label que los precede tiene un
ancho fijo, lo que debería desplazarlos a todos por igual.

cualquier observación/corrección/comentario acerca del formulario, será
bienvenida.

todos mis agradecimientos, una vez más.

un saludo!!