I've been struggling to properly align my submit button with a form entry. What I want is for the submit button to be centered slightly to the right of the form box. Currently, it's aligned to the right but positioned a bit lower than desired.
Despite trying various solutions like using floats and margins as suggested in similar questions, I just can't seem to find the perfect option!
My HTML code looks like this:
<input name="query" id="querybox" style="width:400px;height:40px;font-size:26px;border-radius:15px;border=0;">
</input>
<input type="button" value="Search" id="search" style="width:100px;height=40px;font-size=20px;"/>
The CSS used to style the button is as follows:
#search {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(ico-search.png) no-repeat #151B54 center;
border: 1px solid #FFFFFF;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#submit:hover {
background: url(ico-search.png) no-repeat center #151B54;
border: 1px solid #FFFFFF;
}
Any assistance would be greatly appreciated! Thank you.