Hola chicos:
Estoy aprendiendo a armar formularios con divs (para ya dejar de usar tablas sin borde) y ya he hecho varios formularios para un sistema que estoy armando.
Cada pareja "etiqueta de campo - campo" la estoy armando así:
Código HTML:
<p class="filacampo">
<div class="etiquetacampo"><label for="nombre">Nombre:</label></div>
<div class="campo" id="camponombre"><input type="text" id="nombre" name="nombre" class="controlcampo" /></div>
<!-- Aquí se muestra algun mensaje de error de validación -->
<span class="errorvalidacion" id="errormsjnombre"></span>
</p>
Y los estilos los defino así (en un archivo CSS aparte):
Código:
.filacampo
{
margin: 5px;
}
.etiquetacampo
{
width: 15em;
float: left;
padding-left: 8px;
clear: left;
text-align: left;
}
.campo
{
font-family: Tahoma;
font-size: 11px;
text-align: left;
overflow: auto;
padding-top: 2px;
padding-bottom: 2px;
}
.ctrlcampo
{
font-family: Tahoma;
font-size: 11px;
}
La cosa va bien y los formularios no se ven mal; pero sucede algo raro: Cuando uso la tecla TAB para pasar de un campo a otro de un formulario, en Firefox el cursor no sólo se detiene en el control (en este caso en la caja de texto "nombre", sino también en el fondo del div que contiene el campo (en este caso "camponombre"). En Internet Explorer y Opera no sucede esto, la tecla TAB se comporta como debería.
¿Cómo puedo corregir esto?
Gracias