Aligning input field and image button

Hello

I am creating a search form Where and image button (input type=image) will stay at the right side of search input field.

But the problem is that when I place an image beside the search box, they don't stay at the same line. I mean their middle part is not well aligned. The image stays few pixel upper than the input box level.

How can I fix it with CSS?

 

How about you send a link to the form where you're having trouble? Sounds like vertical-align:middle/bottom could solve this.

 

Ah yes I've seen this with the search box and the little magnifying glass. For Electriduct's page (my copy, not the online one) the GO button was pushing the rest of the search box down. The only way I could get around it was giving the image a bottom margin of -7 px, which moved it down and now looks pretty lined up with the search box. Also widening the search box (taller I mean) helps make things look lined up nicely.

Soulscratch's answer would work if the thing is sitting in a table. But if it's not, try the negative bottom margin.

 

I'm sleepy as hell, but wouldn't a vertical negative margin not work on an inline element (-7px bottom on the <img>)

 

Well it's not an image, but input type="image" with a transparent in the html and sliding doors in the back.
Let's see, I have this:

 <form method="get" action="/swish.cgi" enctype="application/x-www-form-urlencoded" id="formSearch">
	<fieldset>
        <legend><span></span></legend>
	<label>Product Search: </label><input type="text" name="query" id="searchField" class="fieldSearch" />  
	<input value="GO" type="image" name="submit" class="goSearch" id="buttonSearch" src="http://stommepoes.jobva.nl/Electriduct/transparentgobtn.gif" />
	  <input type="hidden" name="sort" value="swishrank" />
        </fieldset>			
    </form>

Code (markup):

The classes were already there and I left it in cause I didn't know what he was doing with it scripts-wise. The id is what I used:

input#buttonSearch {
  height: 23px;
  width: 4em;
  margin-bottom: -7px;/*to make the rest of the search stuff behave*/
  background: url(http://stommepoes.jobva.nl/Electriduct/gobtn.gif) 0 1px no-repeat;
}
input#buttonSearch:hover {
  background: url(http://stommepoes.jobva.nl/Electriduct/gobtn.gif) 0 -23px no-repeat;
}

Code (markup):

I guess it's working for the input... maybe submit and image types are blocks? Because yeah I'm looking and I don't see anywhere where I've set it as display: block.
I tried everything else to make that btch behave and NOTHING worked... even floating it and negative-margin-looping it around still made it too high.

This was the first time I've gotten those little images to behave.

 

Setting vertical-align:middle; on input#searchField and input#buttonSearch did it for me, but I'm not seeing the whole page of course - just this tiny section so any other styles or form controls might have some influence. And you were right about the inputs respecting vertical margins.

 

Eh well, I'm not too familiar with vertical-align because I'm only just now starting to really dick with tables. I didn't know that held any weight with forms too. I AM using the * to strip everything of its margins and paddings including the forms. It could be that most browsers compensate with their own padding or margins for that little image.

Oh hey now that you've got a website, you need to have a super Web 2.0 version to upload on April Fool's. Big pink BETA stars and shiny buttons and Bloggity blog blog blogz. Maddox did that with his site once where he made it like a girlie Xanga and Mr Clean. Hilarious.

 

Try this:

HTML:

<div id="divv">
  <form id="search">
    <input type="image" name="imgg" src="PATH_TO_UR_IMAGE" id="b" />
    <input type="text" name="q" id="q" />
  </form>
</div>

Code (markup):

CSS:

#divv{text-align:right}
#imgg{float:right;margin:0 0 0 -3px}

Code (markup):

 

But if I understood him correctly, the image is sitting too high.Floating doesn't seem to make it line up height wise (cause I tried that once too). indenting the left side shouldn't do anything-- making the bottom negative will pull it down.

Though I am famous for misunderstanding.

 

Well left indenting is not required. I copied the code from the project I am working on currently. The left indentation is there to stick the image button to the input box. I am trying to give a illusion of just one box which has the button in-built.

 

Yeah okay I think I see what you're talking about. But then you're not getting the other guy's problem-- your image isn't sitting too high compared to the text input.

In this image, the top one shows the problem-- the image is higher than the text input, and sometimes then it will push the rest of the input down (and sometimes doesn't, but just sits high)

The bottom image is with the negative bottom margin.

I was sure he meant something like this:

 

The simple solution pointed out by soulscratch works nicely here. My solution in not suited for this problem.