Image Form Button Not Aligned With Select Element 1

[rexolioISback]

I have 2 small forms on my page. What has a simple INPUT box and an image BUTTON. The other has a SELECT drop down and an image button.

I have the image button aligning perfectly with the INPUT box (it's bigger in height than the INPUT box, so it has a vertical alignment of "middle" and it is set perfectly.) It looks like this:

http://216.53.190.158/go.gif

For the SELECT drop down, although it is aligned better with vertical alignment set to "middle" than it is without it, the image is still off. It looks like this:

http://216.53.190.158/search.gif

Here's my style sheet:

img {
	display: block;
	border: 0;
}

form {
	display: inline;
}

input {
	font-size: 8pt;
}

select {
	font-size: 8pt;
}

#box1 {
	font-size: 8pt;
	vertical-align: text-bottom;
	clear: right;
	float: right;
	margin: 30px 6px 2px 0px;
}

#box1 input {
	vertical-align: middle;
}

#box2 {
	width: 540px;
	height: 240px;
	float: left; 
}

#box2 #box2B {
	width: 320px;
	height: 60px;
	margin: 0px 0px 0px 6px;
	vertical-align: text-bottom;

#box2 #box2B input {
	vertical-align: middle;
}

Here's my HTML:

<div id="box1">
<form method="POST" action="">
<input type="text" name="searchbox" size="20">&nbsp;&nbsp; <input src="search.gif" name="Submit" width="60" height="22" type="image">
</form>
</div>

<div id="box2B">
<form>
<select name="pages" size="1">
<option value="page1">Page1</option>
<option value="page2">Page2</option>
<option value="page3">Page3</option>
</select>&nbsp;&nbsp; <input src="go.gif" name="Go" width="25" height="22" type="image">
</form>
</div>

 

[Vragabond]

I do not have time to test it out right now, but have you tried one of the following?

1. Applying different vertical align?
2. Applying vertical align to both input element and the select element?
3. Applying vertical align only to select element?
4. Changing the font of the select element to make it more similar in size to the input box?

 

[rexolioISback]

Thanks, Vragabond... that got the brain waves moving. I simply added the following style and it worked:

#mainbox #navbox select {
	vertical-align: bottom;
}