Question

I used Jquery to create a dropdown list, and some reason I can see the other form elements over the list. It’s almost as if it is between the background, and the text/form elements. Here’s a photo for reference:

I’ve tried changing the z-index, but nothing happened. If i make it position:absolute or fixed, it will solve the transparency problem, however if the window size changes, then the position of the dropdown list also changes…

Here’s the html code:

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<label class="introl" for="location">Location </label><input id="locality" class="intro" type="text" name="location" size="40" value="Country, City" /> <br /> <br />
<label class="introl" for="gender">Gender</label><div class="gender"><span class="male"><input type="radio" name="gender" value="M" />male</span><input type="radio" name="gender" value="F" /> female</div> <br />
<label class="birthday" for="birthday">Date of Birth</label>
<? echo dateOfBirth("","","");?><br />
<input class="submit_intro" type="submit" name="submit_intro" value="Submit" />
 </form>
          <table>
                <tr>
                   <td>
                      <div class="dropdown1"></div>
                   </td>
                </tr>
          </table>

(The list appears in the div#dropdown1)

And here’s the css for the dropdown1

.dropdown1{
margin-top: -253px;
margin-left:183px;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
width: 372px;
background:#FFF;}

I need the list’s background to cover the other form elements (radio buttons, lists, etc.) as well as preventing it’s position to change if the size of the window changes. Thanks!

EDIT: Here’s the css for the others:

label.introl
 {
width: 6em;
float: left;
text-align: right;
display: block;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
font-stretch: condensed;
font-size: 24px;
color: #8a8a8a;
margin-left: 25px;
 }

.birthday
 {
width: 6em;
float: left;
text-align: right;
display: block;
font-family: "Arial Narrow", Arial, Gadget, sans-serif;
font-stretch: condensed;
font-size: 24px;
color: #8a8a8a;
margin-left: 25px;
margin-top: 3px;
      }

 .list1{
margin:0px;
padding:0px;
width : 373px;
list-style-type: none;
border: 1px solid #e2e3ea;
border-top: 0px;
margin: 0;
margin-top: -11px;
      }

 .list1 li{
list-style : none;
width : 373px;
border-right: 1px solid #e2e3ea;
text-align:left;
font-size:24px;
     }

 .list1 a{
display : block;
color:black;
text-decoration : none;
padding : 5px;
padding-left: 1px;
cursor : pointer;
      }

   .selected1{
background: #F6F6F6;
border : none;
color: white;
      }

  .selected1 a{
color : black;
      }

   #loading1{
visibility:hidden;
padding-left:5px;
     }

  .ajax_response1{
position:absolute;
top:auto;
     }

  .matched1{
font-weight:bold;
color: #000000;
background : #D8D8D8;
     }

   .ajax_response1{
border-color : #CCCCCC;
border-style:solid;
border-width : 0px 1px 0px 1px;
background : #E0E0E0;
display:none;
/*padding:2px 2px;*/
position : absolute;
overflow: hidden;
z-index:9999;
       }

  .highlighted1{
font-weight : bold;
       }

Answer 1

Ok it was becuse of the margins you were using change your css to:

.dropdown1 {
    background: none repeat scroll 0 0 #FFFFFF;
    font-family: "Arial Narrow",Arial,Gadget,sans-serif;
    left: 183px;
    position: relative;
    top: -245px;
    width: 372px;
    z-index: 99999;
}

I.e. use relative positioning instead of margins and it’ll work, does on firefox anyhow…