Lining Up Form and Image Button

HTML & CSS
1

Hello,

I’ve been trying ti figure our how to line up my search form input field with the search icon.

The input field is too low, needs to go up some, how would I achienve this.

Here is the URL to what I’m talking about…

http://david-mitchell.ca/election/

Thanks,

Mike

2

Thanks Rayzur,

That worked perfectly and good thing to keep in mind for future forms I use.

Appreciate the help.

Mike

3

Hi,
Inputs are inline elements and you can use vertical-align on them.

It is always good to set up test BG colors so you can see what is going on. :wink:

Try something like this


#search {
float: right;
padding: 5px 35px 0 0;
background:red;
}
#search p {
background:lime;
}
#search p input {
vertical-align:middle;
}
4

I dont believe this is what I’m looking for but thanks.

I just need to line up the input field with the image.

5

Here`s some code that may help.

<div id=“header”>
<div id=“xmenu_search”>
<div id=“search”><form id=“form” name=“searchengine1” onsubmit=“return search1()” action=“”><fieldset id=“fieldset”><input id=“field” type=“text” name=“keyword1” value=“Search term” onfocus=“if(this.value==‘Search term’){this.value=‘’}” onblur=“if(this.value==‘’){this.value=‘Search term’}” /><input id=“button” type=“submit” name=“submit” value=“” /></fieldset></form></div>
<div id=“xmenu-deco-image”> </div>
</div>
</div>