I can't shake this feeling that it should be so straightforward. I'll include screenshots from Chrome, Firefox, and IE 11 to illustrate.
First things first, it's just a basic login form with email and password fields centered both vertically and horizontally on the page.
Here is the HTML/JAVASCRIPT Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Builds Login</title>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["login"]["username"].value;
if (x==null || x=="")
{
alert("Please fill out the username");
return false;
}
}
</script>
</head>
<body>
<section class="loginform tmr">
<form name="login" action="index_submit" method="get" accept-charset="utf-8">
<label for="usermail">Email: </label><br />
<input type="email" name="usermail" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbb2a4beb9a5aaa6ae8baea6aaa2a7e5a8a4a6">[email protected]</a>" required><br />
<label for="password">Password: </label><br />
<input type="password" name="password" placeholder="password" required> <br />
<input type="submit" value="Login">
</form>
</section>
</body>
</html>
CSS code (within <head>):
<style type="text/css">
html, body {
height:100%;
width:100%;
margin:0px;
background: url('images/blue_sky.jpg');
font-size: 12pt;
}
body {
display:table;
vertical-align:middle;
text-align:center;
}
section {
display:table-cell;
vertical-align:middle;
}
label {
color: #FFFFFF;
}
.tmr:before,
.tmr:after {
content: "";
display: table;
}
.tmr:after {
clear: both;
}
.tmr {
*zoom: 1;
}
:focus {
outline: 0;
}
.loginform input:not([type=submit]) {
padding: 5px;
margin-right: 10px;
border: 1px solid rgba(0, 0, 0, 0,3);
border-radius: 3px
box-shadow: inset 0px 1px 3px 0pxrgba(0, 0, 0, 0.1),
0px 1px 0px 0px rgba(250, 250, 250, 0.5);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.loginform input[type=submit] {
border: 1px solid rgba(0, 0, 0, 0.3);
background: #64c8ef; /*Old browsers */
background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottombottom, color-
stop(0%, #64c8ef), color-stop(100%, #00a2e2)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* Chrome, Safari5.1+ */
background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottombottom, #64c8ef 0%, #00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2', GradientType=0 ); /* IE6-9 */
color: #fff;
padding: 5px 15px;
margin-right: 0;
margin-top: 15px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}
</style>
In Chrome, my password input is slightly off to the left, causing the inputs to not align properly.
In Firefox, everything looks spot on.
But in IE 11, the sizes are all different.