Firefox is not centering table, despite using margin: 0 auto
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;
Your problem is display:table-cell on the table element. That's incorrect. Remove it, and your problem gets better.
P.S. In the future, you should try fully paring down your problem to a minimal test case. Delete code—HTML and CSS—that is irrelevant. The h1, the font-family CSS, etc. The process of doing so will show you the problem ≈80% of the time; the rest of the time it leaves you with a simpler problem that will easily get you help.
Deleting code until it got better is how I found your problem. :)
It's because your HTML document lacks <!DOCTYPE type='html' /> directive. Put this line at top of your document, and it's done :)
Also a recommendation: Try to use shorthand syntax whenever possible to make your CSS file more manageable. For example, instead of
padding-top: 50px;
padding-right: 30px;
padding-bottom: 3px;
use:
padding: 50px 30px 3px 0;
加载中,请稍侯......
精彩评论