Dropdown list disappear on Firefox

Question

I have a problem with a dropdown list only on Firefox on Windows (working fine on FF on Mac), Chrome, IE, Opera, Safari.

When I click on the dropdown list and move the mouse to do my selection, the menu closes suddenly.

I can't select anything.

This is a part of my code.

CSS:

.table {
   background:#ffffff;
}
.table ul {
   display: block;
   float:left;
   margin:0;
   padding:0;
   border:1px solid #C9C9C9;
}
.table ul.categ {
   width: 157px;
}
.table ul li {
   height:24px;
   list-style:none;
   padding:5px 10px;
}
.table ul li.title {
   font-weight:bold;
   background:#333;
   color:#fff;
}
.table ul li.even {
   background:#fff;
}
.table ul li.odd{
   background:#FFFFE6;
}

And this is my PHP code:

<form>
    <div class="table">
        <ul>
            <li class="title">Titles</li>
            <li class="even">
                <select name="titles[]">
                    <option value=""></option>
                    <option value="title1">Title 1</option>
                    <option value="title2">Title 2</option>
                </select>
            </li>
        </ul>
    </div>
</form>

Demo: jsFiddle

Any help?

score 0 · Answer 1 · answered Jun 20 '12 at 22:50

0

You're missing < in front of your first option. Not sure if this would be causing your issue or not. Also, are you ending your <form> tag?

answered Jun 20 '12 at 22:50

Drew

462
2
8

the closing `form` is not an issue for sure, but the missing `<` might be easily – Zoltan Toth Jun 20 '12 at 22:53
Ops, sorry the < was copy/paste fault here. The strange thing is that if I place the dropdown list out of my
, it works, but it doesn't work inside that code.
– Mark Jun 21 '12 at 06:09

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

You may need to Hack your CSS for FF on windows. There is an excellent post here on the topic Targeting only Firefox with CSS

edited May 23 '17 at 12:27

Community

1
1

answered Jun 20 '12 at 22:51

Deepend

4,057
17
60
101

score 0 · Accepted Answer · answered Jun 21 '12 at 06:49

0

Found the problem, here the part of my code with the fix. Hope it could help other people.

.table ul li.even {
    background:#fff; 
    position:relative; /* this fix the unclickable dropdown list */
}

answered Jun 21 '12 at 06:49

Mark

1,069
2
21
44

Dropdown list disappear on Firefox

3 Answers3