Question about Layout

I have the following code (XHTML strict):

<div id="page">
			<div id="header">
				
				<div class="title">
				
				<img src="ou_logo.png" width="83" height="56" alt="Open University Logo" /> OU Running Club
				</div>
				
				
				<div class="right">				
					<form method="post" action="localhost">
					<p>
					<a href="#">Sign-Up</a>
					<a href="#">Login</a>
			
						<input type="text" />
						<input type="submit" value="search" /></p>
					
					</form>
				
				</div>
			</div>

Select allOpen in new window

and this is the layout I get:


I was hoping to have the text and the form elements aligned to the middle (or bottom) of the picture.
What do I need to change?

The menu is made of anchor's. Why is there a space between the menus, even though I wrote in my code that there should be no space in between?

.navbar a:link 
{
	display: inline-block;
	width: 115px;
    height: 30px;
    font-weight: bold;
	border-color: black;
	border-style: solid;
	border-width: thin;
	text-decoration: none;
	text-align: center;
	color: black; 
	margin-right: 0px;

}

Select allOpen in new window

admin_sendMail.htm
styles_ourc.css