I’m trying to make this login page show/format correctly on every browser so far it only shows how I want it to work on IE9 on other browsers firefox/chrome the form section is on the left side and not in the middle. (The Username, Password, Pub key, and the log in button all have to be in the middle of the page and not move when the browser is re-sized.)
Can someone look at it and see what I’m doing wrong ?
Thanks for any help…
Here is the HTML CODE:
<script type="text/javascript">
// Return true if unable to open a new window
function popup_blocked() {
var popup = window.open('','_blank','toolbar=no,scrollbars=no','width=0,height=0');
if (!popup) {
return true;
} else {
popup.close();
return false;
}
}
if(popup_blocked()) {
alert('This page requires that you enabled popups in order to process and display content properly.');
} else {
//alert('POPUPS ARE ALLOWED! THANK YOU!');
}
</script>
<html><head><title>Login Page</title>
<style type="text/css">
.auto-style2 {
margin-right: 261px;
}
</style>
<style type="text/css">
.style1 {
vertical-align: top;
}
.auto-style4 {
text-align: center;
}
</style>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font-family: Georgia, serif; background: url(login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
.auto-style5 {
text-decoration: none;
}
.auto-style6 {
color: #3A3A3A;
}
.auto-style7 {
font-size: x-small;
}
</style>
<BODY onload="resetSession();setFocus(document.frmLogin.login);" style="margin-top: 150">
<table width=100%>
<form action="login_page.asp" method="post" name="frmLogin" class="auto-style2" style="width: 100%">
<div class="auto-style4" style="position: absolute; width: 100%; height: 174px; z-index: 1; left: 308px; top: 169px">
<input type="hidden" name="action" value="validate_login">
<table border="0" align="center">
<tr>
<td align="right">Username </td>
<td>
<input type="text" name="login" style="height: 34px">
</td>
</tr>
<tr>
<td align="right">Password </td>
<td><input name="password" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">Pub Key </td>
<td><input name="pasword" style="height: 34px" type="password">
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<!--<input type="submit" VALUE="Login">-->
<input type="submit" style="margin: 0px 0 0 149px;" class="button" name="commit" value="Log in">
</td>
</tr>
</table>
</div>
</form></table>
<p class="auto-style4"><br><br>All Login Attempts are Logged.<br>
<br>
<span class="auto-style7">(11/16/2012 16:12)</span></p>
</body></html>
Your HTML is invalid (which is asking for trouble) and you have no Doctype so browsers will enter Quirks mode (which is inconsistent between browsers and intentionally buggy for compatibility with sites that were written when buggy browsers were the norm).
Also, avoid layout tables and use CSS for form layout.