?
Solved

Line up input box with gif submit button.

Posted on 2003-11-21
6
Medium Priority
?
971 Views
Last Modified: 2007-12-19
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>
0
Comment
Question by:macuser777
6 Comments
 
LVL 8

Accepted Solution

by:
Barry62 earned 120 total points
ID: 9800129
Try CSS:



<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 style="vertical-align: middle;">
      </FORM></P>
0
 

Expert Comment

by:TigerBoy
ID: 9800157
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.
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 80 total points
ID: 9800884
The CSS code will work - you may find it off by a pixel or 2 depending on your browser. You can also use the absmiddle attribute:

<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" align="absmiddle">
</FORM>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:Zontar
ID: 9801284
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');  }
0
 
LVL 4

Author Comment

by:macuser777
ID: 9809929
Thanks all.

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

0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9809997
Just glad it didn't give you a javascript error :-)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question