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://tinyurl.com/3u9gnw6

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.

It's quite hard to explain my problem but you'll see what I mean if you try it.

Here is my CSS for the associated element(s):

#map-uk {
    position: relative;
    height: 316px;
    z-index: 1000;
}

#map-uk .map {
    position: absolute;
    top: 15px;
    left: 35px;
    z-index: 0;
}

#map-uk a {
    position: absolute;
    border: red solid 1px;
}

#map-uk a img {
    display: none;
}

#map-uk #map-uk-hover-scotland {
    width: 107px;
    height: 142px;
    right: 71px;
    top: 14px;
    z-index: 2;
}

#map-uk #map-uk-hover-england {
    width: 143px;
    height: 184px;
    bottom: 5px;
    right: 4px;
    z-index: 1;
}

#map-uk #map-uk-hover-wales {
    bottom: 49px;
    right: 87px;
    width: 55px;
    height: 68px;
    z-index: 4;
}

#map-uk #map-uk-hover-ireland {
    width: 54px;
    height: 50px;
    left: 80px;
    top: 135px;
    z-index: 3;
}

Does anyone know what might be missing / incorrect to prevent it working in IE? I know about the z-index bug (which I think I've fixed with the 'z-index: 10' property on #map-uk. But I'm still getting the issue mentioned above.

IE has ALWAYS had "issues" with abslute positioning and stacking,

Why not use relative positioning with stacking orders instead?

Hmmm I hadn't thought of using relative positioning! I assumed that could be a little tricky as relative positioning wouldn't take them out of the flow?

It's being "out of the flow" that IE has problems with.

Provided you know how to restore the flow back to it's original point it isn't really a problem.

http://www.modtalk.co.uk/_site/code/...ning/relative/

Ah cool I'll check it out thanks

Hmmm I've tried it with relative positioning too but I seemed to have the same problem with regards to hovering over the <a> tags?

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://tinyurl.com/3cm9mvk

Then compare to the original (with red borders to outline the <a> tags):
http://tinyurl.com/3ezkow8

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!

Sounds like a "haslayout" problem in that case.

You think so? It states in the article that the elements can be given a layout by specifying a height or width, or positioning absolutely... but my elements have all of those specified!

Perhaps it's due to it being a HTML5 document? Maybe IE is struggling with it?

You think so? It states in the article that the elements can be given a layout by specifying a height or width, or positioning absolutely..

True but it is Infernet Exploder and it's not unknown for bug fix 'A' to expose or introduce bug ref No. 9,023,189.117.003

IE9 is supposed to be at least HTML5 tolerant but it could be worth trying a different DTD if you have no specific HTML5 requirements.

Here is a best example of maps for you. You must get idea from this example.

173.236.39.250/~angelsde/homesafari/

Originally Posted by chrishirst

True but it is Infernet Exploder and it's not unknown for bug fix 'A' to expose or introduce bug ref No. 9,023,189.117.003

IE9 is supposed to be at least HTML5 tolerant but it could be worth trying a different DTD if you have no specific HTML5 requirements.

Tried some of the other properties (e.g. 'inline-block') AND tried as XHTML Strict instead of HTML5... and STILL no luck!

I don't think I've ever hated IE so much

Originally Posted by angelsdev

Here is a best example of maps for you. You must get idea from this example.

173.236.39.250/~angelsde/homesafari/

I was hoping to avoid image maps and stick with a CSS map, but it's looking as though it's the only way to go.

I can't seem to style the <area> elements though

Managed to find a solution in the end, simply apply a transparent GIF to the <a> tags for IE:

#map-uk a {
    position: absolute;
    background: url('../image/ie-fix.gif');
}

A little dirty, but if I spent any longer trying other ways to get it to work in IE I'd have ended up ripping all my hair out.