Porque se deforma el formulario en Firefox??

[rtr]

porque se descoloca el formulario en firefox cuando se ve perfectamente en el Explorer???

asi se ve en explores:



y asi en Firefox:



Este es el código html:

Código:

<div id="form">
        <p>inicia seccion</p>
				<form action="login.php" method="post" onsubmit="return validate()">
	                           <label for="nombre">Nombre:</label>
                            <input type="text" name="username" size="20" class="campo" />                          
                             <label for="clave">Clave:</label>                            
                            <input type="password" name="password" size="20" class="campo" />

                         	<br />
                           <input type="submit" value="Iniciar sesión" />
											</div>
        </form>
	
      <p ><a href="register.html" >Registrar cuenta nueva</a> </p>

Este es el código css:

Código PHP:

  form { 
  margin:5px; 
    padding: 15px; 
    background: #FF8080; 
    width: 250px; 
    height: 60px; 
} 
 
label { 
    font-size: 14px; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #FFF; 
    display: block; 
} 
 
.campo { 
    margin-bottom: 15px; 
    width: 150px; 
    height: 20px; 
    border: 1px Solid #004080; 
    background-repeat: no-repeat; 
    padding: 2px; 
    color: black; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
 
}  
   

Gracias de antemano

[cristian_cena]

Prueba con lo siguiente:

Encierra con una etiqueta <div id="formularioCentrado"></div> tu codigo html
Luego, en head, copia dentro de <style></style> lo siguiente:

#formularioCentrado {
Margin-left:auto;/*margen izquierdo con respecto al body*/
Margin-right:auto;/*margen derecho con respecto al body*/
_text-align:center; /* a esto se lo denomina hash y se utiliza para que IE también tome*/
_text-align:left; /* el estilo, cuando IE encuentra _propiedad, la renderiza.*/
}
</style>


tambien puedes jugar con las siguientes propiedades
padding-left:el valor que tu quieras;
padding-right:el valor que tu quieras;
width:el valor que tu quieras;

margin es la distancia entre el borde de la caja css y el elemento mas próximo
padding es la distancia entre el borde de la caja css y el contenido de la caja css
dudas?buscalo en google como "css box" */

bueno espero te sirva, saludos.

[rtr]

Gracias cristian_cena pero he probado y no me funciona. Lo seguiré intentando a ver si me equivoqué en algo.

[Newbie001]

asi a primera vista... estas cerrando el div antes del form.

[bex]

Lo que dice newbie001 es correcto. Probá cerrando el div después del form, como debería ser.
Saludos!

[rtr]

tambien he probado y sigue sin funcionar...
la rabia que me dá que solo pasa esto en firefox!!!

[rtr]

si juego con los marging y padding como dice cristian_cena, puedo centrarlo en firefox pero se me descoloca en explorer....y si los dejo en auto se me descoloca tambien en el explorer..

¿que hago???

[bex]

El alto de todo realmente es 60 px? Qué pasa sin incrementás el height de form?

[jomaruro]

Hola:

Al no tener el código completo no sé si la solución que te doy funcionará al 100%, pero no se pierde nada con intentarlo.

Código:

            #contenedor {
                padding:0;
                margin:5 auto;
                text-align: center;
            }
            
            form {
                margin:5px auto;
                padding: 15px;
                background: #FF8080;
                width: 250px;
                /*height: 60px;*/
            }

Engloba tu formulario en un div contenedor con las propiedades que te he indicado en la cita anterior y en las propiedades del div form suprime el height.

Funciona en IE7 y FF3, si no te funciona lo mejor es que pongas tu código completo (tanto el CSS como el HTML) puede haber algun elemento que interfiera en el formulario.

Saludos.

[cristian_cena]

Perdon por descuidar este hilo, si todavía no hallaste la solución posteala que la vemos.
Si la hallaste, por respeto a los demás deberías dejar un mensaje de despedida, en lo posible con la solución, para aquellos que tengan el mismo problema que tu.

Saludos!

[rtr]

HOla de nuevo, deberia haber respondido antes ...pero, se me pasó ya que dejé el problema que trabamos akí. Cuando lo retome y encuentre una solución la pondré akí.

saludos