My text doesn't display right in FF

I have this css codes:

#nav{
width:100%;
height:29px;
background-image:url(button/blank.gif);
background-repeat:repeat-x;

}

#button{
float:left;
width:800px;
height:29px;
text-align:left;

}


#button ul li{

display:inline;
list-style:none;
font-weight:bold;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
vertical-align:middle;
padding-left:7px;
padding-right:7px;

}

#button ul li a:active{
background-color:#99FFCC;

}


#search {
float:right;
padding:1px 3px 3px 3px;
margin-top:0px;
width:20%;
text-align:right;
}

#form {

display:inline;
}

.txt{
width:100px;
height:15px;

}


.btn {

border:1px;
padding:0;
font-size:12px;
background-color:#E9F2DE;

}


Here is my html codes:


<div id="nav">
<div id="button">
<ul>
<li>Home</li>
<li>|</li>
<li>About Us</li>
<li>|</li>
<li>Blah</li>
<li>|</li>
<li>Blah</li>

</ul>
</div>

<div id="search">
<form method="get" action="http://........" name="search">

(Search codes go here)

</form>
</div>
</div>

Result is my list (and the search engine) doesn't place right in FF and Netscape. I can't get my list to v-align in the middle of my background image. Can anyone tell me what's wrong? Thanks in advance.

 

any link that shows this im confused on what happens.