Databases
StackOverflow2013
Postsdbo
POInput select dropdown not working in firefox
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInput select dropdown not working in firefox
    text
    copied!<p>I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome. </p> <p>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.</p> <p>I need your help regarding this.</p> <p>Here is my <strong>html</strong> code:</p> <pre><code>&lt;div class="layout_nemo" style="margin:0px auto; width:520px;"&gt; &lt;aside id="models"&gt; &lt;section class="nestingList" style="width:520px;"&gt; &lt;div style="float:right; width:100px; border:1px solid #f00; text-align:right"&gt;&lt;a href="#" class="track-click"&gt;A5&lt;/a&gt; &lt;/div&gt; &lt;div style="clear:both; margin:0px; padding:0px;"&gt;&lt;/div&gt; &lt;div class="flyout" style="border:3px solid #000;"&gt; &lt;div class="inner"&gt; &lt;div class="col" style="float:right;"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="#" class="track-click"&gt;A5 Coupé&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" class="track-click"&gt;A5 Sportback&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="articles" style="float:left;"&gt; &lt;article class="visuallyhidden"&gt; &lt;select name="bvgn " style="border:1px solid #000; height:30px;width:180px;"&gt; &lt;option&gt;option1&lt;/option&gt; &lt;option&gt;option2&lt;/option&gt; &lt;option&gt;option3&lt;/option&gt; &lt;option&gt;option4&lt;/option&gt; &lt;/select&gt; &lt;select name="bvgn " style="border:1px solid #000; height:30px;width:180px;"&gt; &lt;option&gt;option5&lt;/option&gt; &lt;option&gt;option6&lt;/option&gt; &lt;option&gt;option7&lt;/option&gt; &lt;option&gt;option8&lt;/option&gt; &lt;/select&gt; &lt;/article&gt; &lt;article class="visuallyhidden" style="border:7px solid #3C0; height:30px;"&gt;content here&lt;/article&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt; &lt;/aside&gt; &lt;/div&gt; </code></pre> <p>And the <strong>CSS</strong> code:</p> <pre><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&gt;.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&gt;h1&gt;a { margin-left:0; } </code></pre> <p>Also sharing you a <a href="http://jsfiddle.net/indy12/cgRA2/13/" rel="nofollow">link</a> <a href="http://jsfiddle.net/indy12/cgRA2/13/" rel="nofollow"></a> where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox &amp; chrome)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload