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?

odd, here's the problem explained: http://css3pie.com/forum/viewtopic.php?f=3&t=587 ...no fixes it seems...still weird that the problem shows only on remote server — Fulvio, Apr 05 '11 at 13:03
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. — Devin Burke, Apr 05 '11 at 15:41

score 33 · Answer 1 · edited Nov 01 '12 at 21:34

33

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.

edited Nov 01 '12 at 21:34

Jack

10,943
13
50
65

answered Nov 01 '12 at 21:14

Nathan

331
3
2

This worked for me as well. Only difference is my select element was assigned to a class that set the font-family. – Mike T. Jan 16 '14 at 19:18
This also applies in IE9 as well! – John K. Chow Mar 31 '14 at 18:39
I had a similar issue with color and background-color. Setting them directly on the option solved the insta-close. – Micah May 08 '14 at 22:27
2

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. – Alex Oct 06 '14 at 16:42

score 8 · Answer 2 · edited Feb 05 '13 at 16:08

8

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

edited Feb 05 '13 at 16:08

PaulStock

11,053
9
49
52

answered Feb 05 '13 at 15:50

Mush

81
1
2

Tomas Buteler · Answer 3 · 2016-01-02T19:00:31.233

7

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

edited Jan 02 '16 at 19:00

answered May 15 '11 at 23:29

Tomas Buteler

3,892
4
29
42

Worked like a charm, who would have guessed that it was css problem – dfilkovi Nov 28 '11 at 09:28
3

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` – jrz Mar 20 '13 at 16:16

score 3 · Answer 4 · edited May 23 '17 at 12:34

3

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

edited May 23 '17 at 12:34

Community

1
1

answered Mar 12 '14 at 10:51

funk

144
1
8

Holy crap. This worked. +1 for the weirdest IE bug I've ever seen. Thanks. – Temuz Jun 11 '15 at 00:19

score 2 · Answer 5 · answered May 24 '12 at 22:43

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.

score 1 · Answer 6 · answered Dec 05 '12 at 22:25

I spent a whole day investigating this issue but in IE9. I'm sharing my solution since it wasn't because of the color or font-family of the select.

It turns out that IE freaks out when it finds an option inside a select that has a specified CSS value for opacity. The issue happens even if the opacity is overridden by another CSS rule with opacity: none or opacity: 1, the property shouldn't even appear.

It's a creepy browser bug.

score 0 · Answer 7 · answered Feb 05 '14 at 04:25

0

I've had this issue in IE9 also. It was due to @font-face statements where you have the font-family property equal to the real font-family name. In IE11 it works fine.

answered Feb 05 '14 at 04:25

David Fidge

451
5
6

Anton Pegov · Answer 8 · 2017-05-27T10:11:46.520

0

That saved me:

$('select').css('background-color','red')

PS. Need to reset background color even if it's already set in css file.

edited May 27 '17 at 10:11

answered May 25 '17 at 15:55

Anton Pegov

1,413
2
20
33

IE8 and IE9 select boxes closes themselves when hovering

8 Answers8