asked on

Line up input box with gif submit button.

Hi,

How can i get the input box and gif submit in line in this code. As it is the gif appears too high.

<FORM action=/cgi-bin/lance/search.cgi method=get>

<INPUT
style="BORDER-RIGHT: #066c9f 1px solid; BORDER-TOP: #066c9f 1px solid; BORDER-LEFT: #066c9f 1px solid; BORDER-BOTTOM: #066c9f 1px solid; BACKGROUND-COLOR: #ecf1f5"
onfocus=this.select() size=14 value="Find Find" name=keywords>

<INPUT
type=image height=30 alt=Search width=22
src="refferals_files/search.gif" value=Submit border=0 name=go2>
</FORM></P>

ASKER CERTIFIED SOLUTION

Barry62

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TigerBoy

How about putting it in a table? You can set the vertical alignment.

<FORM action=/cgi-bin/lance/search.cgi method=get>

<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td valign=middle>
<INPUT
style="BORDER-RIGHT: #066c9f 1px solid; BORDER-TOP: #066c9f 1px solid; BORDER-LEFT: #066c9f 1px solid; BORDER-BOTTOM: #066c9f 1px solid; BACKGROUND-COLOR: #ecf1f5"
onfocus=this.select() size=14 value="Find Find" name=keywords>
</td><td valign=middle>
<INPUT
type=image height=30 alt=Search width=22
src="test.gif" value=Submit border=0 name=go2>
</td></tr></table></FORM>

If you have white space around your image then it may be hard to center without seeing the image.

SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zontar

Image inputs create usability and other problems. I suggest you use a standard type="submit" and apply CSS to the input to achieve the desired appearance:

<input type="submit" class="submitButton" value="Search">

.submitButton { width:125px; height:55px; background-image:url('referrals_files/search.gif'); }

macuser777

ASKER

Thanks all.

I used CSS as Barry62 suggested but had to use the absmiddle code to get it exact
so
30 Barry62
20 georgemarian.

seanpowell

Just glad it didn't give you a javascript error :-)