CSS - Css Menus In Ie - Hovering Under Form Elements

I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code:
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:
Code:

#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.

They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower.

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

Jeremy

Suppose I have:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript">
      //**********************************************************
      // This function adds another field to the form based on
      // what field name is passed in. 
      //**********************************************************
      function add_item(field) {
        if(!document.getElementById) return; //Prevent older browsers from getting any further.
        var field_area = document.getElementById(field + '_field');
        var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
 
        // Find the count of the last element of the list. It will be in the format '<field><number>'. If the 
        // field given in the argument is 'friend_' the last id will be 'friend_4'.
        var last_item = all_inputs.length - 1;
        var last = all_inputs[last_item].id;
        var count = Number(last.split("_")[1]) + 1;
       
        if(document.createElement) { //W3C Dom method.
          var li = document.createElement("li");
          var input = document.createElement("input");
          input.id = field+count;
          input.name = field+count;
          input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
          li.appendChild(input);
          field_area.appendChild(li);
        } // end if(document.createElement) 
        else { //Older Method
          field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
        } // end else
      } // end function add_item(field)
      //**********************************************************
    </script>
  </head>
  <body>
    <form>
      <table>
        <tr>
          <td><label for="images">Images (for banner and sidebar)</label></td>
          <td>
            <ul id="images_field">
              <li><input type="text" id="images_0" name="images_0" /></li>
            </ul>
          </td>
          <td><input type="button" id="button" value="Add another image"  onclick="add_item('images');" /></td>
        </tr>
        <tr>
          <td colspan="3">
            <label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
            <textarea rows="3" cols="3" id="misc" name="misc"></textarea>
          </td>
        </tr>
        <tr>
          <td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
        </tr>
      </table>
    </form>
  </body>
</html>

When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts?

Edited to say that this behavior only appears in FireFox.

The form elements (<select> specifically) on a background layer seem to be showing through a <div> layer positioned above it (at least in IE.)

Does anyone know a trick or some such to stop the form elements from the background from showing through the <div>?

t h a n k s

Hi,

I'm having a problem and was wondering if CSS can help me do what I need to.

I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it.

An example of this would be:

Name: ____________________ Address: __________________

That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name".

I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label.

Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name.

Hi there!

I've been diving into trying to make mobile web pages and though a lot of my former CSS experience helps me a great deal I get a bit perplexed about forms.

I'd like to have all my form elements at the width of a 100% except for checkboxes and radiobuttons.
Now, this almost works out all the way but I have a problem with how the strict rendering handles form elements.

I've tried using both XHTML Mobile 1.2 and XHTML Mobile 1.0 but the same problems arise;
Apart from wanting the elements to go 100% in width, I also would like them to respect margins. If I simply set the width to a 100% and my right and left margins to, say, 5px, I get the field pushed in 5 pixels from the left but I cannot get the 5 pixel indent from the right.

I have tried using a wrapper div but it suffers the same result. I have figured out that this can have something to do with the rules of mobile pages provided by the XHTML mobile rendering specification but I'm now wondering if there's anything I can do to accomplish this. I've found out that mobile pages that have full width elements look (in almost all cases) very good on most handsets I've tested.

Thanks in advance!

Hi guys, I've tried for days but can't solve the problem.

I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top).

Vertical alignment etc doesn't work!

Any suggestions?

I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server.

The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit.

<td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2'
onclick="javascript:mapbutt(document.commit,2)" /></td>

This is the javascript code for mapbutt

function mapbutt(myform,dex) {
myform.action.value='map';
myform.qnum.value=dex;
}

The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them.

Here is the style for button_notdone

.button_notdone {
font-family: monospace;
font-weight: bold;
width: 28px;
height: 22px;
color:#ffffff;
background:#000000;
}

The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey.
I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being.
How can I get these submits to look like what I want on safari.
Thank you.

Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS?

I'm thinking of something similar to this (but without the JS):

http://ryanfait.com/resources/custo...-radio-buttons/

I have a floating div with a solid background and a z-index set to 20. I have a form "behind" the div. For some weird reason, the drop down elements on the form "bleed through" the div.

Is there any way to fix this?

Hello!

I've got a <div> inside a <form> which I show/hide when a user clicks on a show/hide link. That div holds several form options which I DON'T want to submit with the form when the div is hidden.

At the moment, even when my div is hidden, the values within it are still being submitted with the form.

Is it possible to / how do I - hide the div so any values enclosed in it do NOT get submitted along with the form?

Thanks,

regan.

Can a <form element hold inline elements?

For example,

Code:

 <form ... >

<input .... />

I'm putting this bare text in this form even if I dunno if it's allowed haha

</form>

More generally, I know one can NEVER put a block-level element in an inline element.

HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ????


Thank you

How do I reduce the vertical space between form elements that I put inside a div?

I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them.

Brad

Hi all

I really like the standard form styles in Safari, and until v2 (I guess) Safari didn't react on any custom CSS styling yet.

But now with Safari 3 it begins to interpret some of the custom stuff, e.g. background color etc.
I really don't like that because I think it's ugly - Mac has cool forms design, and I'd like my websites to have the standard Aqua look.

But what's the easiest way to prevent Safari from using my custom CSS (which is quite cool in browsers like IE and FF, but not in Safari)?

I'd like best to have some sort of @import rule or conditional comment for Safari that is not interpreted ONLY by safari... Not too much dirty hacks, please. ;-)

Thanks for help
Josh

For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas?

Code:

input[type="text"], select {
  color:#888888;
  font-size:10px;
  height:auto;
  }

I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page.

My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row.

Does anyone have some good form organization rules that could help me?

Thanks!!