Forums: Front End:

I have a bit of trouble with a form field that follows a bunch of inline images. It does not want to center vertically and wants to align to the bottom of the images. Any ideas appreciated! I could probably stick a table in there, but I would really like to keep the mark up simple.

look at top menu


HTML (very simple)


<div id="topmenu">

<a href="#"><img src="images/home.gif" width="74" height="30" align="left" /></a>
<a href="#"><img src="images/contact.gif" width="78" height="30" align="left" /></a>
<a href="#"><img src="images/search.gif" width="65" height="30" align="left" /></a>

<form id="form1" name="form1" method="post" action="">
<input name="words" type="text" size="10" class="words"/>
<img src="images/search_go.gif" width="32" height="30" />
</form>
</div>

and the CSS is

#topmenu {
float: right;
width: 355px;
background-color: #DFE7D3;
}
#topmenu img {

border:0;

}

#topmenu form {
display:inline;


}

#topmenu .words{
font-size:10px;
}

fixed - I set the margin and padding to 0 for the form tag, put it in it's own div and floated it to the right.