CSS: Align background image

I'm using a background image for a submit button that I've using for a search form, and 开发者_StackOverflow社区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.

---

Try to remove height:20px from .submit_search_icon. At least on Mac it looks better in Chrome.