Internet Explorer Like button madness

Question

I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none). In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers. In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears. In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background. html code of hidden mouseover div: ```

Accepted Answer

I found the answer through one of my colleagues who's had a similar problem.

When the page was loaded, the popup needed to be hidden, so I gave them a class that said `display:none;`. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.

I don't exactly know why yet, but I did find out that if I use the jquery `.hide()` and `.show()` functions to toggle and initially set the hidden div and not use a class, it works like a charm. Case closed. IE continues to suck.

Internet Explorer Like button madness

Solution

Problem