How to align search box with image?

HTML & CSS
1

Hi guys

This is just an update for the search box that I have posted yesterday here.
http://thefml [dot] org [dot] uk/secret/index.php/main/menu_selector/home

How to allign vertically the search box with the magnifying glass icon?
By the way it is inside a <div>

and the css responsible for that ID is,


#menu_search {
	width: 289px;
	height: 40px;
	padding: 0px;
	border: 0px solid gray;
	margin-left: 676px;
	margin-top: -31px;
	position: absolute;		

}

Thanks in advanced.

2

I want to align and center the input search box along side the magnifying glass.

3

#menu_search input, #menu_search img {vertical-align: middle}

Will align all your items ( the loop, the search field and the submit arrow} to each other.

You should put all of those in a block element such as a DIV or or P … just to make the form code valid. :slight_smile:


 <form action="http://thefml.org.uk/secret/index.php/email/send" method="post" accept-charset="utf-8" id="menu_search">
 	<p>
	 	 	<img name="magnify" src="http://thefml.org.uk/secret/imgs/mag.png" width="40" height="40" alt="lock_smiths_magnify">
			<input type="text" name="sbox" onfocus="if(this.value == 'search the site') { this.value = ''; }" value="search the site" onblur="if(this.value==''){this.value = 'search the site';}" size="16"/>
			<input type="image" src="http://thefml.org.uk/secret/imgs/gthan.jpg" alt="Search">
		
		</p>
 </form>

note also that I moved the ID to the form, that way you can eliminate the the DIV that is wrapped around the form … as it is redundant.

Hope that helps.

4

@dresden_phoenix

Thank you very much.

5

Just as an aside, the magnify image looks a bit grainy around the outside (with the 1px white outline. You can fix that in Photoshop by adding a “matte” color to the image. Choose the same color as the blue background.