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/
