The following HTML fails to create a centred table in FireFox, even though it works in Chrome and IE. I’ve tried using margin: 0 auto and that doesn’t help. Can anyone help me?
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>ICG Administrator Login</title>
<style type="text/css">
body {
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
h1 {
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: #00377E;
display: block;
font-family: sans-serif;
font-size: 26px;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 32px;
line-height: 32px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
vertical-align: baseline;
}
table {
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border: 1px solid #053F89;
color: #444;
display: table-cell;
font-family: sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 16px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
vertical-align: top;
white-space: normal;
}
</style>
</head>
<body>
<h1>Gateway and CDUE Administration</h1>
<div style="width: 100%; height: 50px; background-color: #053F89; background-origin: padding-box;"></div>
<DIV style="text-align: center;">
<form method="GET" action="j_security_check">
<BR>
<table>
<tr style="background-color: #053F89; font-weight: bold; color: white;">
<td colspan=2>Log In</td>
</tr>
<tr>
<td>User Name:</td>
<td><input type="text" name="j_username" />
</td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="j_password" />
</td>
</tr>
<tr>
<td colspan=2><input type="submit" value="Login" /></td>
</tr>
</table>
</form></DIV>
</body>
</html>
Get rid of line 42,
display: table-cell;