Can't get block element to line up right [56k warn]
Posted: Mon Jan 29, 2007 2:34 pm
I have a search box that floats (right) inside of a horizontal bar on the top of a site I'm building. The label and the input line up fine because they are inline elements, but because I've set the <a> tag to "display: block" it won't line up inside of the bar any more. Anybody know how I can get it to go back in there??
Here is how it looks (The semi-opaque "go" button is where I want it to display, and the other is where it is displaying)

Code: Select all
<div id="search_box" class="float_right">
<label for="search">Product Search</label> <input type="text" id="search" name="Search" class="text search" />
<a href="javascript://" onclick="document.search_form.submit()" class="button go"><span>Go</span></a>
</div>Code: Select all
#search_box{
padding: 3px 10px 0 0;
float: right;
}
form .go
{
width: 33px;
height: 20px;
background: url(../images/buttons/go.gif) no-repeat 0px -20px;
display: block;
}
