How To Perfectly Align Image Button With HTML Input Textbox
May 1st, 2006 by Angsuman ChakrabortyThe form element input with type text strangely refuses to align with an adjacent image button (input element of type image). The problem is rather hard to solve as regular methods like using align or margin or padding or even adding whitespace to the image fails. Here is a surprisingly simple solution to this problem. But first lets take a look at the problem.
The input textbox above is misaligned with the image button above as you can see. The code is:
<form>
<input type=”text” name=”foo” value=”bar”>
</input><input type=”image” src=”http://www.utexas.edu/learn/forms/graphics/button.gif” ></input>
</form>
The solution is deceptively simple. Here is the code which works:
<form>
<input type=”text” name=”foo” value=”bar”>
</input><input style=”position:absolute” type=”image” src=”http://www.utexas.edu/learn/forms/graphics/button.gif”></input>
</form>
Here is the demo:
Filed under Headline News, How To, Tech Note, Web | | RSS 2.0 | Trackback this Article | Email this Article
Add to Technorati Favorites
July 19th, 2006 at 10:02 pm
what about aligning them both at the middle vertically?
July 27th, 2006 at 11:44 pm
align=absmiddle is deprecated.
Can anyone explain why this behaviour happens, and why position: absolute solves it?
I’m constantly coming across CSS problems but the solutions don’t leave me any the wiser
August 8th, 2006 at 12:07 pm
Kat: This is probably due to the “image baseline” issue, where there is whitespace at the bottom of an image. Since images are inline objects, they sit on the baseline and not at the bottom of the containing block. Changing the style to “display: block;” would also work in an example like this.
November 21st, 2006 at 4:20 pm
Ive been trying this and ive figured out that puting ur elements in a table, each in a différent cell is doing the alignment very well.
Cause playing wit absolute positioning in a table can end up really messy.
( normal textbox is setting height and text size from my CSS style sheet )
January 5th, 2007 at 9:38 pm
using vertical-align: text-bottom is the best way to achieve the desired effect
February 1st, 2007 at 9:25 am
Bonjour,
Sous IE6, le bouton Go est 1 pixel au-dessus du input
Tout le monde le voit
June 28th, 2007 at 12:43 am
Fantastic - I’ve used this to align PayPal shopping cart buttons so they don’t affect the page layout below them. It’s a problem with PayPal that has been bugging me for ages! Thanks.
November 19th, 2007 at 2:05 am
Bonjour, you can solve the 1 pixel problem easily.
Complete Code:
November 19th, 2007 at 2:10 am
asp:ImageButton ID=\
May 7th, 2008 at 6:55 am
Works a charm!
May 16th, 2008 at 11:08 pm
This has been a booger…
Didn’t work for me.
But I did use style=”vertical-align: middle” which worked like a charm.