I have a search bar with two image buttons on a webpage I designed using ASP.NET.
When I view the page in Internet Explorer 8, Google Chrome or Opera, I noticed that the textbox and image buttons are not aligned properly. The buttons seem to be positioned higher than the textbox, and I'm unable to determine the cause of this issue.
Here is the relevant HTML code:
<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: It's important to mention that there are some irregularities in the provided snippet, such as missing quotation marks around the IDs. However, I would like to clarify that these quotes do exist in my original source code. The above excerpt is an altered version resulting from saving the content from Internet Explorer, which caused several changes to the markup.
I have also shared the same code at for anyone interested in investigating the issue. The problem specifically pertains to the search controls located to the right of the black navigation bar near the top of the page.
Thank you for your assistance.