CSS issue: IE image button not aligned correctly

Question

Firefox displays correctly that the red "Search Listing" button is inline with the text input field.

But, IE 6/7 is misaligned.

Any ideas why IE is displaying the red button lower on the page than other browsers?

Screenshot of IE 8 (correct)
api.browsershots.org/png/original/54/546946b7cfd67ce2c59de0b608c3323.png

Screenshot of IE 7 (incorrect)
api.browsershots.org/png/original/52/52c54c02fb6803584e77223309df99b.png

Answer 1

Wow they look almost exactly the same to my eye. Did you try setting the margins to 0 on the input button?

EDIT: Ok nevermind. It is not displaying correctly in my Firefox either according to your IE8 screenshot.

Answer 2

it's because you are floating the button and not the textbox. add float:left to #city-field

Answer 3

IE is notoriously bad with widths and floats. Both elements seem to have widths defined. I actually see them aligned just fine in IE7.

Adding a float: left to #city-field should cure your issues this - floated elements are sometimes treated differently than non-floated.