facebook style navbar

Here is the navbar in my rails app. The problem is I am not sure if this wil work cross browser because I am adjusting the padding of the anchor tags to get the requ开发者_Python百科ired height. THe other issue is the search form is inside this navbar and it's not vertically centered on inside it.

I basically want a facebook style navbar that has a few box like links(with hover) and a search form (a textbox and a search image both integrated/looking seamless). Right the search textbox and the buttom are not seamless they look separate.

Help appreciated.

<div class="span-24 last nav_container ui-state-default">
            <div class="main_links_div span-18">
              <ul><li id="home_nav"><a href="/">New</a></li><li id="post_nav"><a href="/post_topics">posts</a></li><li id="cat_nav"><a href="#">Categories</a></li><li id="city_nav"><a href="#">Cities</a></li></ul>
            </div>
            <div class="span-6 last div-search-form"><form method="get" id="search_form" class="right" action="/searches">
              <input type="text" value="City_Name" name="search_term" id="search_term" class="search-term">
                   <span class="small-button"><a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"><span class="ui-button-icon-primary ui-icon ui-icon-search"></span><span class="ui-button-text">Search</span></a></span>
                   </form>
            </div>
          </div>

THe css

main_links_div {
margin-bottom:0.4em;
vertical-align:baseline;
}

main_links_div ul {
display:inline;
margin-bottom:0 !important;
padding-left:0;
white-space:nowrap;
}

main_links_div li {
display:inline;
}

main_links_div li a {
font-size:1em;
padding:0.7em 0.8em;
}

right {
float:right;
}
small-button {
font-size:0.8em;
}

It looks like you are using some sort of a grid framework that you did not specify, however, I am pretty sure this is what you are after:

#nav_container{
overflow:auto;
}

.main_links_div {
margin-bottom:0.4em;
}

.main_links_div ul {
margin-bottom:0 !important;
padding-left:0;
list-style:none;
}

.main_links_div li {
float:left;
}

.main_links_div li a {
font-size:1em;
height:1em;
padding:0.7em 0.8em;
}

#search_form {
float:left;
margin-left:5em;
}

.small-button {
font-size:0.8em;
}

Also remember to put the '.' before your class names!