Form not selectable

[ploppy]

Hi i am having trouble selecting a form which is inside a div element. here is the code:

Html

 <form action="process.php">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>

css

#sidebar {
float: left;
width: 17em;
margin: 0 -18 4em 0;
padding-left: .5em;
padding-bottom: 32em;
}
#sidebar form, #sidebar div h3 {
background: #7E8BFA;
}
#sidebar form {
margin: 0; padding: 0.6em;
}
#sidebar form .text {
width: 9em;
}
#sidebar div {
background: #F7F9F9; color: #FFF;
padding: 0 1em 1em;
margin-top: 0.75em;
border: 1px solid #000000;
}
#sidebar div p {
color: #000000;
font-style: normal;
font-size: .8em;
font-weight: normal;
}
#sidebar div h3 {
font-size: 115%;
margin: 0 -0.8em; padding: 0.4em 0.8em;
/*text-transform: lowercase;*/
}

I am calling it like so:

<div id="sidebar">
<form action="process.php">
<p><label for="name">Name</label> <input type="text" id="name" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" /></p>
<p class="submit"><input type="submit" value="Submit" /></p>
</form>
</div>

The problem i am having is that i cannot select any fields within the form. ie, the pointer doesn't change to a cursor for text input. cannot select radio buttons etc. the form is totally unselectable. if anyone has any ideas, would be very grateful. Thanks.

[sifredi]

Your code works fine here. There must be something else in the cascade that confuses the form.

Note that defining the class

.text

in your CSS will not target your

<input type="text">

.

[ploppy]

thx sifredi. for the life of me i cannot see where the problem could be or where to start troubleshooting. Uotside the div it acts fine, soon as i put it back, nothing. Perhaps as you say, it is inheriting from somewhere else. thanks for all your help.

[antidote45]

Try this:

#sidebar {
position: relative;
z-index: 10;
}

You can go as high as you need on that z-index number if you have other z-indexed elements.

[Xapti]

yeah. Essentially make sure there's no transparent divs positioned on top of your form, as strange/unlikely as that may be.

[antidote45]

yeah. Essentially make sure there's no transparent divs positioned on top of your form, as strange/unlikely as that may be.

Actually, Xapti, if you are using negative margins in your layout it can be very likely that one of your other div's is positioned over the form and a z-index would be the solution. Since I don't know how the rest of this layout is arranged it's a possibility.