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?

Solution 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.

Solution 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;}

Solution 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;
}

Solution 4

I've got the same problem and the solution is following:

select         { font-family:inherit; font-size:inherit; }

and the parent of select has necessary font option.

Thank for this answer this question

Solution 5

It looks like it might be a few different CSS declarations that can cause this.

I was having the same problem but no color declaration. It turns out that it was a font-family rule. I used a conditional comment to target IE8 and older and set the font-family to "inherit." Padding works fine, as does font-size.

View more solutions

Comments

[Fulvio]

odd, here's the problem explained: css3pie.com/forum/viewtopic.php?f=3&t=587 ...no fixes it seems...still weird that the problem shows only on remote server

[Devin Burke]

In response to your lack of means to test other version of IE, I submit you can use an application called IETester (easily found on Google) which will show you your page in IE versions 4.0 through 8.0.

[dfilkovi]

Worked like a charm, who would have guessed that it was css problem

[Jon z]

Seems like this is still an issue in IE9, both color and background-color must be reset. Thanks for the fix! color: #000; background-color: #fff

[Mike T.]

This worked for me as well. Only difference is my select element was assigned to a class that set the font-family.

[John K. Chow]

This also applies in IE9 as well!

[Micah]

I had a similar issue with color and background-color. Setting them directly on the option solved the insta-close.

[Alex]

This was a great fix. Unfortunately, I couldn't even use a custom font (would still experience the issue), but when I overwrote both CSS rules of 'select' and 'select option' to use a generic font like 'Arial', the issue went away.

[Temuz]

Holy crap. This worked. +1 for the weirdest IE bug I've ever seen. Thanks.