can't click in textarea nor button in form

Question

SOLVED: Found out that one of the ul had a width of 100% thus overlapping the form. Thanks for everyone's help nevertheless.

I have no idea what happened.I can't click into my textarea. Nor can I highlight the text that is placed into the textarea tags when the page is loaded. Also, I can't click on the button that is inside the same form. If I create a new input box, button, or text I can't highlight that either. I have no idea what is wrong. I'm not producing duplicate id's in my code nor do I see any tags that overlap the form. Am I to assume the problem is elsewhere in the code, and if so what it would be. I would post the entire code but that is hundreds of lines. Here is the sample code below for the form.

EDIT: I ran this through jsfiddle and see no problems with it. It's clearly outside the scope of this code. My question then is, what would cause for the form to be not highlighted. It must be a CSS issue? As far as I can see, the only adjustments I've made in CSS are the positions and nothing else. Below is the jsFiddle page with full code. As you can see, I can't click inside the form.

http://jsfiddle.net/ZJwAv/2/

Answer 1

It sounds like you've got some transparent absolutely-positioned box that's overlapping your form fields, that's why they don't register your mouse-clicks.

Try using Chrome or Firefox's developer tools to identify any elements on the page that might be interfering. This would be a good opportunity to use Firefox 14's 3D view: http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/

Can you post a link to your site, or a jsFiddle that reproduces the problem?