Modify search button

[goalieman34]

Hey everyone,
I am looking to add a button to the end of my search box that is located above my header image. I have tried a few different methods and so far can’t get the image to show up.
Here is my website

Thanks for all the help so far as I really appreciate it!

[farzadina]

You can use something like this:
Add the following html code, right after your input field.

HTML:

CSS:

.section .input {

border: medium none !important;

padding: 0 !important;

position: relative;

right: -27px;

top: -21px;

}

[goalieman34]

thanks @farzadina can you take a look real quick. I just need to line the search box with the rest of the line and cant get it to move up.

http://petrowest.squarespace.com/

[farzadina]

You can first line them up by changing the top: 0px; to top: 6px; in the .section .input. Then add this rule to your stylesheet to bring them up:

.section{

margin-top:-11px;

}

[Senff]

First, trim the empty areas from the button — the button itself is 57×24 but the searchbutton.png image as a whole is 74×39. Too much on the outsides.

Second, now that you have an image as a submit button, you can remove the regular input button code, so remove .

That should get you on your way.

(That is, if you really must use a table for this.)

[goalieman34]

@Senff @farzadina that worked great! thanks. I will also trim the area on the button to fix it up.
Just one last little thing to fix up. When you view the site on an iphone it shows this small bubble in between the text field and button. Any idea how to get rid of that.

[Senff]

See my second point.

[goalieman34]

sorry about that… its good now thanks.

[Author]

Posts