Form Fields not working on firefox when inside a div

Question

ok well the title says it all "Form Fields not working on firefox when inside a div" basically you cant use the field, you cant type in it, you cant select in it. if I use a select box you cant select the options.

if i move the form field out side of ANY div it works.

heres my code

        <form action="" method="post">
            <div class="optionsbox" id="settings">
                    <div class="optionitem">Google Analytics
                        <div style="float:right;">
                            <input type="text" id="googleanalytics" name="googleanalytics" size="10"/>
                        </div>
                 </div>
             </div>
        </form>

this is only happening in Firefox, all other browsers I have tried work fine. oh and I would like to point out there is no jquery/javascript onclick or other functions attached to this form or the divs.

anyone able to help answer this one? it's doing my head in.

and just so you know, I have tried 7 different machines, so its not my browser, so clearing the cache or resetting firefox will not work.

---

I found the issue, inside a .js file was the following line

$("div").disableSelection();

this was in a completely unrelated script and for some reason only effected the divs when loaded in firefox and nothing else.

thank you for the responses I have had so far. I will leave this here for others who come across the same problem.

Answer 1

The problem is that old jQuery's disableSelection() method does browser-sniffing and runs different code in different browsers. In Firefox it prevents all mouse events on the element and all its descendants.

This is why the API documentation at http://api.jqueryui.com/disableSelection/ says not to use it and why it's gone in recent jQuery.