Solved

Line up input box with gif submit button.

Posted on 2003-11-21
6
965 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 8

Accepted Solution

by:
Barry62 earned 30 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 20 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 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…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

729 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