I've been struggling to get rid of the gray border around the SIGN UP button in the tbody section. I've tried applying classes (along with the ID) and using pseudo classes like :4th-child {border:none}, but nothing seems to work. The only solution that somewhat works is removing the entire border-right:1px solid gray from the #signup td:, but that's not ideal. Here's the relevant code snippet:
HTML
<div id="signup">
<form action="" method="GET" id="form">
<fieldset>
<table>
<thead>
<tr>
<th><label for="signupname">Sign Up</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="signupname" placeholder="Your Name"></td>
<td><input type="password" placeholder="Password"></td>
<td><input type="email" placeholder="Email (optional)"></td>
<td><input type="submit" value="Sign Up"></td>
</tr>
</tbody>
</table>
<fieldset>
</form>
</div>
CSS
#signup{
height:28%;
min-height:90px;
background-color:seashell;
padding-top:1px;
margin-top:-1px;
}
#signup label{
font:200% Corbel;
text-shadow:0px 1px 0px white;
color:maroon;
font-weight:bold;
}
#signup table{
margin:2% auto;
}
#signup td{
padding:5px 50px;
border-right:1px solid gray;
}
#signup th{
padding:0 50px;
}
#signup input{
font:130% Trebuchet MS;
padding:5px 5px;
}
Any help would be greatly appreciated!