facebook style navbar

Question

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 required 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;
}

Answer 1

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!