I’m using a background image for a submit button that I’ve using for a search form, and am trying to align the submit button/background image it so that it’s vertically centered within the search input bar.
Check out the JSFiddle with my code to get a better idea of what I mean:
http://jsfiddle.net/XVx5A/3/
It aligns perfectly for FF and Chrome, but for some reason is stuck above the input bar in IE, and I can’t seem to figure out why. Any advice on what’s going on here and how to make this work in IE?
Note: I was originally using the image itself to submit the form, but do not want to go that way because of the automatic x & y coordinates messing up the clean url structure.
Thanks in advance for your help.
Floating the button and adding a fixed height to the search field normalizes positioning. Updated: http://jsfiddle.net/XVx5A/21/
You could also make the submit transparent and include the search icon as the text field’s background.