Input select dropdown not working in firefox

Question

I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome.

I have created a jQuery submenu box. My problem is when I put content in the content area of the submenu, its ok. But when I am creating a select box in that content area its not working in Firefox but works fine chrome browser...I mean I can't select any option of that select box when I am trying to select option 2, option 3 etc, the whole thing got disappear.

I need your help regarding this.

Here is my html code:

<div class="layout_nemo" style="margin:0px auto; width:520px;">
    <aside id="models">
        <section class="nestingList" style="width:520px;">
            <div style="float:right; width:100px; border:1px solid #f00; text-align:right"><a href="#" class="track-click">A5</a>
            </div>
            <div style="clear:both; margin:0px; padding:0px;"></div>
            <div class="flyout" style="border:3px solid #000;">
                <div class="inner">
                    <div class="col" style="float:right;">
                        <ul class="nav">
                            <li><a href="#" class="track-click">A5 Coupé</a>
                            </li>
                            <li><a href="#" class="track-click">A5 Sportback</a>
                            </li>
                        </ul>
                    </div>
                    <div class="articles" style="float:left;">
                        <article class="visuallyhidden">
                            <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
                                <option>option1</option>
                                <option>option2</option>
                                <option>option3</option>
                                <option>option4</option>
                            </select>
                            <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
                                <option>option5</option>
                                <option>option6</option>
                                <option>option7</option>
                                <option>option8</option>
                            </select>
                        </article>
                        <article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
                    </div>
                </div>
            </div>
        </section>
    </aside>
</div>

And the CSS code:

.visuallyhidden {
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}
.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {
clear:both;
}
aside {
display:block;
}
nav ul, ul.nav {
padding-bottom:0;
}
.flyout {
display:none;
height:auto;
overflow:hidden;
position:absolute;
z-index:9999;
}
.flyout nav#navigation .links a {
font-family:Verdana, Helvetica, sans-serif;
line-height:20px;
font-weight:bold;
background-position:0 -444px;
}
.flyout nav#navigation .links a:hover {
background-position:0 -444px;
}
.flyout>.inner {
position:relative;
margin:-3px 3px 3px 3px;
}
#models {
position:absolute;
top:-124px;
}
#models.home {
top:-84px;
}
#models section {
display:inline;
float:left;
}
#models .flyout {
left:-3px;
width:520px;
}
#models .articles, #models .inner {
overflow:hidden;
}
#models .inner {
position:relative;
padding-top:20px;
min-height:280px;
}
#models .nav li {
list-style-image:none;
list-style-type:none;
margin-left:0;
}
#models .nav a {
display:block;
height:29px;
line-height:29px;
padding-left:9px;
border-top:1px solid #e7e9ea;
text-decoration:none;
background:none;
}
body.special #main .content .mediaContainer, body.special #main .content .audi_flash_replace, body.special #main .content .flash_3col, body.special #main .content .con_flashfilm_3col, body.special #main .content body.special.detail .headline h1 {
font-size:36px;
}
.layout_nemo #models {
top:23px;
}
.layout_nemo #models section>h1>a {
margin-left:0;
}

Also sharing you a link where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)

Answer 1

July 14, 2021

Anyone experiencing recent issues with Firefox not rendering HTML, in particular the <select> element correctly see below:

I have been managing a Grails web application for a number of years and came across this issue just the other day, where my site worked fine in all browsers, but for whatever strange reason, Firefox simply would not render the <select> tags in their allocated <div>

Following a lot of testing across the browsers and using Firebug console/inspection, I tracked it down to an old HTML 4.0 Doctype definition.

As soon as I updated my site to the HTML 5 standard doctype, Firefox fell into line and rendered everything perfectly.

FIX:

Change OLD Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

To NEW Doctype: <!DOCTYPE html>

I know this is YEARS later than the original question post, but I would have really appreciated stumbling across this answer.

I hope it helps someone out there.

Answer 2

I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.

http://jsfiddle.net/cgRA2/19/

<div class="layout_nemo">
<aside id="models">         
    <section class="nestingList">
        <div id="new_url_top">
            <a href="#" class="track-click">A5 series</a>
        </div>
        <div style="clear:both; margin:0px; padding:0px;"></div>
        <div class="flyout" style="border:3px solid #000;">
            <div class="inner">
                <div class="col" style="float:right;">
                    <ul class="nav">
                        <li><a href="#" class="track-click">A5 Coupé</a></li>
                        <li><a href="#" class="track-click" >A5 Sportback</a></li>
                    </ul>
                </div>
                <div class="articles" style="float:left;">
                    <article class="visuallyhidden">
                        <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
                            <option>option1</option>
                            <option>option2</option>
                            <option>option3</option>
                            <option>option4</option>
                        </select>
                        <select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
                            <option>option5</option>
                            <option>option6</option>
                            <option>option7</option>
                            <option>option8</option>
                        </select>
                    </article>
                    <article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
                </div>
            </div>
        </div>
    </section>
</aside>

The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.

Problem is inside your js.js file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.

So the part of jQuery that is making the problem is located around:

• line 4836
• line 4841
• line 4937
• line 4942
• line 5074

If you can get that spaghetti code out and do something with it... Good luck.

Someone posted a solution here Containing div loses focus when mousing over select dropdown

Answer 3

Developing primarily in Chrome will always lead to strange behavior in other browsers, so a good start would be to do it in Firefox. If it works in Firefox 99% it will work everywhere else, in IE too. Chrome has a lot of assumptions and "helpful" features that derail developers.

Also, my test in Firefox showed no errors. I am using 23.0.1.