But it's not the left nav...it's the right form....this:
<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>
Adjusting the margin on the table, as you suggested, isn't going to
help as each column has a separate problem. The problem is the form
elements specifically.
Jeremy
On Wed, Apr 30, 2008 at 12:34 PM, Andrew Doades <[EMAIL PROTECTED]> wrote:
> ok, I think you need:
>
> td {display: line;}body {
> margin-top: 0px;
> margin-left: 0px;
> margin-right: 0px;
> }
>
> <td>
>
> <ul>
> <li><a href="index.php">Home</a></li>
> <li>a href="complete.php">Browse All Titles</a></li>
> </ul>
> </td>
>
> You may need to do something like this to get it to work.
>
>
>
> Andrew
> [EMAIL PROTECTED] wrote:
> > In the screenshot that is linked, you'll notice that the vertical
> > alignment of the two dropdown menus and two input buttons is
> > incorrect. They are at the right side.
> >
> > I've applied a tag style to the select tag. This isn't working. And
> > there is a class style on the input buttons. Which is not working
> > either.
> >
> > Float right works for horizontal alignment and that is how I've got
> > the forms at right set up. It's the vertical alignment that is keeping
> > me up at night.
> >
> > Jeremy
> >
> > On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades <[EMAIL PROTECTED]> wrote:
> >
> >
> > > Not entirely sure what you are asking here?
> > >
> > > When I look at your screen print, it looks ok in IE.
> > > I think something like float:right;
> > > is what you want??
> > >
> > >
> > >
> > > Andrew
> > >
> > > [EMAIL PROTECTED] wrote:
> > >
> > >
> > > > Thank you, Andrew! I'll definitely try this out.
> > > >
> > > > Another area of concern is with the right-side form elements. They are
> > > > not aligning properly and nothing I've tried has worked.
> > > >
> > > > Any advice in solving this issue as well would be appreciated.
> > > >
> > > > Jeremy
> > > >
> > > >
> > > >
> > > >
> > > > On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades <[EMAIL PROTECTED]>
> wrote:
> > > >
> > > >
> > > >
> > > >
> > > > > Not being a big knowledge man of css but I would have thought you
> would
> > > > > need, <ul> and <li> in there?
> > > > > <ul>
> > > > > <li><a href="index.php">Home</a></li>
> > > > > <li>a href="complete.php">Browse All Titles</a></li>
> > > > > </ul>
> > > > >
> > > > > and in your css have something like
> > > > > #nav ul {
> > > > > margin-left: 2em;
> > > > > padding-left: 0;
> > > > > color: #000000;
> > > > > }
> > > > >
> > > > > Andrew
> > > > >
> > > > > [EMAIL PROTECTED] wrote:
> > > > >
> > > > >
> > > > >
> > > > >
> > > > > > 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/
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > >
> > > > ______________________________________________________________________
> > > > 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/
> > > >
> > > >
> > > >
> > > >
> > > >
> > >
> >
> >
> >
>
______________________________________________________________________
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/
