Question

I have a search textbox and two image buttons on a page I created with ASP.NET.

When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can’t tell why.

Here is the key markup:

<div id=searchbar>
    <div id=Panel1
        onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
        <input id=txtSearch type=text name=ctl00$txtSearch>
        <input id=btnSearch title=Search src="Test_files/search.png"
            type=image name=ctl00$btnSearch>
        <input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
            type=image name=ctl00$btnAdvanced>
    </div>
</div>

NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.

I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.

Thanks.

Answer 1

Try

vertical-align:text-bottom;

on the elements that are too high. It’s a common problem. You can try out other options for that CSS property too if that isn’t quite right. Have a look here