[Ovillo] desplazamiento extraño en Firefox y fallo en textarea

Mar Sep 12 06:48:12 UTC 2006

Os escribo para preguntaros que es lo que puede estar mal. Se trata de un 
documento html con su css correspondiente. Todo se ve bien en IE pero en FF 
la capa central queda desplazada a la izquierda, ¿qué puede estar pasando?

Asímismo el textarea del formulario hace algo raro en FF y se me coloca un 
scroll horizontal en lugar de vertical y tiene un ajuste 'virtual'.

A continuación copio el html y el css respectivamente.

Gracias por vuestra ayuda!

alex
PD: en lugar de imágenes he cambiado los colores de fondo de las capas para 
que se distinga mejor el desplazamiento del div #interno.

HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Adhesiones M&aacute;laga 2016</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="estilo.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="contenedor">
 <div id="cabecera"> </div>

 <div id="contenido">

  <div id="interno">
   <form method="post" action="#">
        <table width="100%"
   border="0"
   cellpadding="0"
   cellspacing="0">
        <tr>
          <td width="14%" class="titulo"><a href="#"></a>
           <a href="#"><img src="images/btn_volver.gif" alt="bot&oacute;n 
volver" width="84"
     height="15" border="0" align="top" /></a>
          <td width="21%" valign="middle" class="titulo">Tipo de 
adhesi&oacute;n* </td>
          <td width="65%" valign="top" class="titulo">
            <input name="tipo" type="text" class="formularios" id="tipo" 
size="15" />          </td>
        </tr>
        <tr>
          <td class="titulo"><div align="left"><a href="#"><img 
src="images/btn_veradhesiones.gif" alt="boton ver adhesiones" width="84" 
height="15" border="0" align="top" /></a></div></td>
          <td valign="middle" class="titulo">Nombre*</td>
          <td valign="top" class="titulo"><input name="nombre" type="text" 
class="formularios" id="nombre" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Apellidos*</td>
          <td valign="top" class="titulo"><input name="apellidos" 
type="text" class="formularios" id="apellidos" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">NIF/CIF*</td>
          <td valign="top" class="titulo"><input name="nif" type="text" 
class="formularios" id="nif" size="15" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Direcci&oacute;n*</td>
          <td valign="top" class="titulo"><input name="direccion" 
type="text" class="formularios" id="direccion" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">C&oacute;digo postal* </td>
          <td valign="top" class="titulo"><input name="cp" type="text" 
class="formularios" id="cp" size="15" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Localidad*</td>
          <td valign="top" class="titulo"><input name="localidad" 
type="text" class="formularios" id="localidad" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Pa&iacute;s</td>
          <td valign="top" class="titulo"><input name="pais" type="text" 
class="formularios" id="pais" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Correo electr&oacute;nico </td>
          <td valign="top" class="titulo"><input name="correo" type="text" 
class="formularios" id="correo" size="75" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="middle" class="titulo">Tel&eacute;fono</td>
          <td valign="top" class="titulo"><input name="telefono" type="text" 
class="formularios" id="telefono" size="15" /></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="top" class="titulo">Comentarios          </td>
          <td valign="top" class="titulo"><textarea name="comentarios" 
cols="74" rows="4" wrap="virtual" class="formularios" 
id="comentarios"></textarea></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="top"><div class="mensaje">*Datos obligatorios </div> 
<a href="#"><img src="images/btn_enviar.gif" alt="bot&oacute;n enviar" 
width="73" height="19" border="0" /></a></td>
          <td valign="top"><div class="txt_azul">
            <p>En cumplimiento de la Ley Org&aacute;nica 15/1999, de 13 de 
diciembre,   de Protecci&oacute;n de Datos de Car&aacute;cter Personal se 
informa que los datos personales   que se solicitan van a ser incorporados a 
un fichero automatizado y tratados con   la exclusiva finalidad de su 
participaci&oacute;n en los procesos de adhesi&oacute;n a M&aacute;laga 
Ciudad Europea de la Cultura 2016, siendo el responsable del fichero y de su 
tratamiento el &Aacute;rea de Cultura del Excmo. Ayuntamiento de 
M&aacute;laga.<BR>
              Los datos   ser&aacute;n tratados con absoluta 
confidencialidad, no siendo accesibles por terceros   para finalidades 
distintas para las que han sido facilitados.<BR>
              El titular<span class="txt_azul"> de   los datos tiene 
reconocidos los derechos de acceso, rectificaci&oacute;n, oposici&oacute;n y 
cancelaci&oacute;n de los mismos, los cuales podr&aacute;n ser ejercitados 
mediante el env&iacute;o   de correo electr&oacute;nico a la 
direcci&oacute;n &ldquo;<A href="mailto</p>
          </div></td>
        </tr>
      </table>
 </form>
 </div>
 </div>
 <div id="pie"> </div>
</div>
</body>
</html>

CSS:

body {
 text-align:center;
 background-color:#0558A3;
 margin: 0;
 padding:0;
 }

#contenedor {
 width: 800px;
 height: 585px;
 padding: 0px;
 margin: 0 auto;
 text-align:left;
 clear: both;
 background-color:#FF0000;
}

#cabecera {
 margin: 0px;
 padding: 0px;
 width: 800px;
 height: 161px;
 background-image:url(images/cabecera.gif);
 background-position: top;
 background-color:#CCCCCC;

}

#contenido {
 margin:0 auto 0 auto;
 padding-top: 10px;
 width: 800px;
 height:387px;
 background-image:url(images/contenido.gif);
 background-position:top;
 text-align:center;
 background-color:#FFFF00;

}

#interno {
 width: 710px;
 background-color:#FFFFFF;

}

#pie {
 margin: 0px;
 padding: 0px;
 width: 800px;
 height: 27px;
 background-image:url(images/pie.gif);
 background-position:top;

}

titulo {
 text-align:left;
 font-size: 11px;
 font-weight:bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 color:#666666;
}

formularios {
 text-align:left;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 background-color:#FFFFFF;
 color:#003366;
 border: #0066CC;
 border-style:solid;
 border-width: 1px;
 }

mensaje {
 font-size: 9px;
 font-weight: bold;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:left;
 margin:5px;
}
txt_azul {
 margin-top: 8px;
 font-size: 8px;
 color:#0066CC;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:justify;
 text-decoration: none;
 }
txt_azul a{
 margin-top: 8px;
 font-size: 8px;
 color:#0066CC;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 text-align:justify;
 text-decoration: none;
 }