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.