Question

I’m trying to align an image link next to a textbox. Here’s my markup:

<div style="height: 18px; overflow: hidden; padding: 5px 6px 6px 5px; width: 207px; background-color: #21235C">
    <input id="search" type="text" name="search" style="height: 18px; padding: 0; width: 182px; border: none;" />
    <a style="vertical-align: top;" href="#">
        <img src="http://i.imgur.com/0UZyz.png" alt="search" />
    </a>
</div>

This works fine in FF and IE. The image aligns correctly next to the textbox. But in Chrome and Safari, the textbox is pushed down.

Here it is in jsFiddle: http://jsfiddle.net/tQUyW/

Any way to fix that?

Answer 1

Float the a element right, and remove vertical-align: top as noted by @animuson.

http://jsfiddle.net/fTadS/1