Botón desacomodado en todos los navegadores

morringo · #1 (**permalink**) 04/03/2012, 20:28

Buenas a todos, soy nuevo en esto de páginas webs y me encuentro aprendiendo HTML y CSS, pero me encuentro con un problema en un formulario en donde hay 2 cuadros de texto y abajo un botón. El problema está en que el botón se posiciona de forma diferente en los tres navegadores que he visualizado la página (Firefox, Chrome e Internet Explorer) y aún no he sabido bien la razón.

Les pongo el código para ver si pueden ver mi error:

Index.html

Código:

<!DOCTYPE html>
<html lang=es>
<head>
    <meta charset=utf-8>
    <title></title>


        <style>
            @import "fonts.css" all;
        </style>
</head>
<body>

    
    <form method="get" action="">
        <p>
        <label for="nombre">Nombre:
            <input type="text" class="textbox" name="nombre" id="nombre" accesskey="n" autocomplete="on" required />
        </label>
        </p>
        <br />
        
        <p>
        <label>Fecha de nacimiento:
            <input type="text" class="textbox" name="fecha" id="fecha" accesskey="f" autocomplete="on" required />
        </label>
        </p>
        

        <p>
        <input type="submit" id="enviar" value="enviar" />
        </p>
        

        <p>
        <label>
            <textarea readonly rows="3" cols="40"></textarea>
        </label>
        </p>
    </form>

</body>
</html>

fonts.css

Código:

@font-face{
    font-family: "open-sans";
    src: url("Fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
}

@font-face{
    font-family: "prosto-one";
    src: url("Fonts/Prosto_One/ProstoOne-Regular.ttf") format("truetype");
}

@font-face{
    font-family: "poiret-one";
    src: url("Fonts/Poiret_One/PoiretOne-Regular.ttf") format("truetype");
}

@font-face{
    font-family: "aurulent-sans";
    src: url("Fonts/Aurulent_Sans/aurulentsans-regular-webfont.eot");
    src: url("Fonts/Aurulent_Sans/aurulentsans-regular-webfont.ttf") format("truetype");
}


*{
    margin: 0px;
    padding: 0px;
}

form{
    margin: 20px auto;
    width: 380px;
    height: 400px;
    padding-top: 20px;
    background-color: rgba(100, 149, 237,0.5);
    border-radius: 45px 45px 10px 45px;
    -webkit-border-radius: 45px 45px 10px 45px;
    -moz-border-radius: 45px 45px 10px 45px;
    font-family: aurulent-sans,sans-serif;
}

form label{
    margin-left: 35px;
}

form input.textbox{
    margin-bottom: 6px;
    border-color: #ff830d;
}

form input#nombre{
    margin-left: 90px;
}

form input#enviar{
    float: left;
    margin-left: 270px;
    font-family: aurulent-sans,sans-serif;
}

form textarea{
    float: right;
    margin-right: 20px;
    margin-top: 30px;
    border-radius: 5px 5px 5px 25px;
}

En la parte donde pongo:

Código:

*{
    margin: 0px;
    padding: 0px;
}

Lo pongo porque leí que por default cada navegador tiene su forma de posicionar las cosas y su valor predeterminado para eso, y que para formatear ese valor para todos y que se reseteen en 0, es poniendo eso.

Espero y mi error sea sencillo, debido a que no lo he podido solucionar moviendo código y buscando la solución.

Saludos.
Gracias.

Mariita_Css · #2 (**permalink**) 04/03/2012, 22:24

como se posiciona el botón?

si dieras ese dato te podríamos ayudar

morringo · #3 (**permalink**) 04/03/2012, 22:28

El botón lo posiciono de la siguiente manera:

Código:

form input#enviar{
    float: left;
    margin-left: 270px;
    font-family: aurulent-sans,sans-serif;
}

El gran problema es que cada navegador lo posiciona diferente.