CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
TimJK
TimJK

Reputation: 475

CSS issue: IE image button not aligned correctly

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

Upvotes: 2

Views: 1463

Answers (3)

jscharf
jscharf

Reputation: 5899

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.

Upvotes: 0

Russ Bradberry
Russ Bradberry

Reputation: 10865

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

Upvotes: 2

novacara
novacara

Reputation: 2257

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.

Upvotes: 0

Related Questions