Internet Explorer 9's magically expanding div

Question

Well I'm stumped with this one. As you can see if you view this jsfiddle with Internet Explorer 9, there's a div that expands automatically on hover. No javascript required! Anyway, I checked the css with the W3C validator and it shows several errors, but as far as I can tell they are due to vendor specific properties, or at least I haven't been able to find syntax errors, etc. I suspect this particular class could be too much for IE 9:

div.gridViewScrollerH
{
    width: 916px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-x: auto;
    -ms-overflow-y: hidden;
}

Has anyone had this problem before? Any ideas? Thanks

Shirleeshirleen

IE9 doesn't need -ms-overflow-x or -ms-overflow-y. Those are aliases of overflow-x and overflow-y respectively, so there is no reason to use them if you already use the unprefixed versions (they have no effect if you do). – Kalevala

This is more of an auto vs hidden overflow issue I think. Some combinations of values won't work for example. – Kalevala

@Kalevala Yes, I didn't have those orginally. I added those lines when I started to get desperate :p – Shirleeshirleen

Answer 1

just add display: inline-block; to the class

div.gridViewScrollerH
{
    display: inline-block;
    width: 916px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-x: auto;
    -ms-overflow-y: hidden;
}

Jeromyjerreed

Sorry. display: inline-block I meant. I fixed answer. Thnx BoltClock – Jeromyjerreed

display:inline-block worked for me, too. In my case, only the notion overflow:autocaused this IE9 "magically expanding div" bug – Leland

An Update, it is working only with a fix width, if you have no width defined it won't work – Surrebuttal

Answer 2

This problem specific to IE9. Make overflow style of the div to scroll , instead of applying auto.

Peacock

Answer 3

Please try adding min-height: 0% in the class

Rothermere