z-index problem in IE

Question

I have a map with points on it which the user hovers over to reveal further information.

The problem I have is hard to explain because it only seems to be a problem when the user views the page in IE and when it is hosted on my server. Exactly the same code on the jsfiddle page below works fine.

http://jsfiddle.net/FbYEW/

What happens when hosted on my server is the z-indexes on the popups do not work and the popups appear underneath the other spots. Can anyone think why this might be... it's very frustrating not to be able to replicate the problem for anyone to see.

EDIT:

I was viewing the page hosted on my server in compatibility mode on IE8. If you look at the jsfiddle page in IE the same problem occurs - so nothing to do with my server after all... oops

Answer 1

When hosted from your server, the page is rendering in a browser mode other than IE9 Standards Mode.

For example, if it's rendering in IE7 Mode or Quirks Mode, z-index problems are expected.

Hit F12 to bring up the Developer Tools, and see which it is.

There are many different possibilities as to why this is happening, see:

http://hsivonen.iki.fi/doctype/#ie8modes

If you just want to fix it without working out where the problem is coming from:

<meta http-equiv="X-UA-Compatible" content="IE=edge">