In Chrome (and chrome only), I have the I have this odd graphical glitch with a form I have created:
Screenshot (on local computer)
As you can see, it appears that the left border is just getting cut off. Below I have the code:
body {
text-align: center;
}
td {
vertical-align: middle;
padding: 2px;
}
#login-table td:nth-child(1) {
text-align: right;
}
#login-table input {
padding: 2px;
}
#login-table {
margin-bottom: 14px;
}
#login {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.required {
font-weight: bold;
}<html>
<head>
<title>Register</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="login">
<h2>Administrator Registration</h2>
<form method="POST">
<table id="login-table">
<tr>
<td class="required">Username:</td>
<td><input type="text" name="username" required/></td>
</tr>
<tr>
<td class="required">Email:</td>
<td><input type="text" name="email" required/></td>
</tr>
<tr>
<td class="required">Password:</td>
<td><input type="password" name="password" required/></td>
</tr>
<tr>
<td class="required">Confirm Password:</td>
<td><input type="password" name="confirm" required/></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="first-name"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="last-name"/></td>
</tr>
</table>
<input type="submit" value="Register"/>
</form>
</div>
</body>
</html>I've tried a lot of solutions for related issues, but I can't find any that make this issue go away. Please help! Thanks!