[css-d] Positioning form elements

[jerauf]

I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:

            <div id="nav">
                 <div id="nav_left">
                <a href="index.php">Home</a> |<a href="complete.php">
Browse All Titles</a> | <a href="author.php">About Author</a></div>
                <div id="bookmark"><table width="307" border="0"
cellspacing="0" cellpadding="0">
  <tr>
    <td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
                        Title
                        <select name="var" size="1">

 <option value="A">A</option>

 <option value="B">B</option>

 <option value="C">C</option>

 <option value="E">E</option>

 <option value="F">F</option>

 <option value="G">G</option>

 <option value="H">H</option>

 <option value="I">I</option>

 <option value="J">J</option>

 <option value="K">K</option>

 <option value="L">L</option>

 <option value="M">M</option>

 <option value="N">N</option>

 <option value="O">O</option>

 <option value="P">P</option>

 <option value="Q">Q</option>

 <option value="R">R</option>

 <option value="S">S</option>

 <option value="T">T</option>

 <option value="U">U</option>

 <option value="V">V</option>

 <option value="W">W</option>

 <option value="X">X</option>

 <option value="Y">Y</option>

 <option value="Z">Z</option>

 <option value="1">1</option>

 <option value="2">2</option>

 <option value="3">3</option>

 <option value="4">4</option>

 <option value="5">5</option>

 <option value="6">6</option>

 <option value="7">7</option>

 <option value="8">8</option>

 <option value="9">9</option>

 <option value="0">0</option>

                </select><input type="image" class="inputbutton"
src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action=""
method="get">Decade <select name="var" size="1">

 <option value="1950">1950s</option>

 <option value="1960">1960s</option>

 <option value="1970">1970s</option>

 <option value="1980">1980s</option>

 <option value="1990">1990s</option>

 <option value="2000">2000s</option>
                      </select><input type="image" class="inputbutton"
src="img/input.jpg" alt="" width="15" height="15">
</form></td>
  </tr>
</table>

                </div>
            </div>


And here are the applicable styles:


#nav {
    background-image: url(../img/navback.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border: thin solid #7a8251;
    height: 25px;
    width: 771px;
}
#nav_left {
    width: 400px;
    float: left;
    text-align: left;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    padding-left: 5px;
}
#bookmark {
    width: 300px;
    float: right;
    text-align: right;
    display: inline;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
}
.inputbutton {
    margin-right: 3px;
    margin-left: 3px;
}
select {
    display: inline-table;
    font-size: 75%;
    padding: 0px;
}


But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.

There is a screenshot at http://www.graiai.com/snap.jpg

This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even lower.

I don't know what to do! Any ideas?

Jeremy
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/