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?

Abraham

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 – Abraham

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. – Rooftree

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.

Crapulous

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

This also applies in IE9 as well! – Glottalized

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

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. – Petronius

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

Obtrusive

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

Sherylsheryle

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

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 – Gnni

Answer 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

Renege

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

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

Hexapody

Answer 6

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.

Boarfish

Answer 7

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.

Fullmer

Answer 8

That saved me:

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

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

Peeling