IE8 and IE9 select boxes closes themselves when hovering

Question

I got this weird problem as in topic: in IE (i'm testing version 8, got no way to test older/newer versions) and only in IE all the select boxes on my website started to close themselves as soon as i hover my mouse to select an option. This isn't happening on Firefox, and this isn't happening on my local server, only on the test remote server (yes, the two sites are identical). So, to recap it: Local version: all fine, even in IE. Remote version: IE's select boxes "crash" as soon as i hover on them. Any ideas?

Answer 1

I had this problem in IE8 only and here's how I solved it:

In my CSS I was applying a font-family to the SELECT. Instead I applied it to the SELECT OPTION.

So instead of this:

select {font-family:'Avenir LT W01 85 Heavy';}

I did this:

select option {font-family:'Avenir LT W01 85 Heavy';}

And the menu stopped closing erratically. Hope this helps someone.

Answer 2

I found that the problem was in adding quotes in the name of the font-family. So, instead of writing

select{font-family:"Open sans";}

i've declared

select{font-family: open sans;}

Answer 3

I was having the same issue. In my case it was totally unrelated to Javascript, contrary to what your link implies. Turned out to be simple CSS.

Eventually I discovered that applying a color attribute to my select inputs' CSS with anything other than black would render them unusable. It didn't matter if the value was in hex or rgb, as long as it was black.

I put a conditional comment to target IE 7 or 8 (even though 7 was fine, I need it for IE 8 in compatibility mode), and set up this style declaration:

.myclass select {
   color: #000;
}