Hover issues with overlapping <a> .png's in Internet Explorer

[pealo86]

I've made a basic interactive CSS / jQuery map of the UK in which each country is highlight as you hover over it.

 

Here is a link to it:

http://concept.freshbeat.co.uk/jobsworkingfromhomedirectory-14102011/0-dev/test/

 

I have highlighted each country with a red border so that you can see the dimensions of each image.

 

Of course, it works fine in all browsers bar IE, although I'm a little surprised to see that it doesn't even work in IE9.

 

It seems as though IE just isn't reading the z-index properties properly. It's like you have to hover completely out of the map and then carefully hover over your country of choice, without touching any of the others.

 

One thing I've just stumbled across whilst testing it, I decided to add a background colour to each <a> so that I could see if they were stacked in the correct order in IE.

 

And now I've found that the hover's work perfectly in IE when a background colour is applied?!

 

See here:

http://concept.freshbeat.co.uk/jobsworkingfromhomedirectory-14102011/0-dev/

 

Even in IE7, the map works fine when background colours are applied. The problem might be due to the fact that I'm using transparent .png's?

 

Does anyone know of a workaround? As me slicing up the map and applying a separate background to each individual <a> tag isn't an idea solution, although it may be the only one!

[teynon]

Your links both go to pages with 500 errors.

[pealo86]

Oops sorry! Here they are again:

 

First

http://concept.freshbeat.co.uk/jobsworkingfromhomedirectory-16102011/0-dev/test/

 

Second:

http://concept.freshbeat.co.uk/jobsworkingfromhomedirectory-16102011/0-dev/

 

Thanks