Strange things are happening...
Let me share the code for my inputs:
#sign_in input#submit {
height: 56px;
background-color: #88b805;
font-weight: bold;
text-decoration: none;
padding: 5px 40px 5px 40px; /* top, right, bottom, left */
border: 0;
width: auto;
-moz-border-radius: 25px;
-khtml-border-radius: 25px;
-webkit-border-radius: 25px;
}
#sign_in input#submit:hover {
-moz-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-khtml-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
-webkit-box-shadow: 5px 3px 5px rgba(0,0,0,.5);
cursor: pointer;
}
input, textarea {
font-size:20px;
display: block;
width: 365px;
height: 40px;
background: #273243;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #ffffff;
/* margin: 0 0 0 100px; top, right, bottom, left */
padding: 5px 5px 5px 15px; /* top, right, bottom, left */
border: 0px;
}
input:focus, textarea:focus {
background: #313131;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
My current dilemma involves the submit button:
<div id="sign_in" align="center">
<form>
<input id="name" type="text" value="Email address" required class="clearField curved" /> <br />
<input id="password" type="text" value="Password" required class="clearField curved" /><br />
<input id="submit" type="submit" value="Log in" class="curved" align="center">
</form>
</div>
Interestingly, despite setting the div to align=center, everything is centered in Chrome except the login button.
On another note, Firefox and Safari on Mac display it correctly. The hiccup seems to be limited to Chrome in both Windows and Mac operating systems where the submit button appears too close to the left margin.
Upon inspecting developer tools in Chrome, I noticed something unusual:
input::-webkit-outer-spin-button {
-webkit-appearance: outer-spin-button;
-webkit-user-select: none;
display: inline-block;
margin-left: 2px;
}
The margin-left being set to 2px caught my attention. Perhaps targeting this specific pseudo-class could override it – a hackish method that I haven’t tried yet. Is there another way to resolve this quirk without resorting to such tactics?
What's causing this misalignment, and how can I rectify it? My goal is to have the button centered.
Edit: I attempted to target the specific Pseudo selector by adjusting the margin, but no changes took effect. Even with margin-left set to 150px, the layout of the button remained unchanged. It’s puzzling why this isn't working as expected.