[hicksjt]

Hello,

I have constructed a CSS image map of an aerial photography that displays hot links to the respected building. Once clicked the link brings up a virtual tour. There is also a legend contained within the graphic with clickable points.

I am testing in Internet Explorer 6 and Firefox 2. Everything works for Firefox. Here's the thing with IE - from the link below on the first map there are 8 possible total numbered sections to click on along with the legend at the bottom right-hand corner of the image map. #1, #4, and #8 work fine but the others do not ONLY in IE. I should note that I am using a little bit of Javascript from Dreamweaver 8 to open a new window for the virtual tour to display though I do not think this has anything to do with this. So I guess the question I have is why are some links working while others are not in Internet Explorer.

http://photographyoptions.net/south_...t_college.html

[tomdkat]

Wow, that's quite the map construct. What I would do if I were you is choose ONE location that doesn't work in IE6. I would assign that element a red, 1px border and see where it appears when the page is rendered in IE6 and where it appears when the page is rendered in Firefox. That will tell you how IE is dealing with the positioning that is going on (hopefully).

Also, I notice you're using an XHTML 1.0 DOCTYPE. I don't know how well IE6 will deal with that DOCTYPE. How does the page behave in IE7?

Lastly, check out this example of a CSS image map. The example linked to on that page appears to work for me in IE6 (Maxthon 2.0.9 with IE6 rendering engine).

Peace...

[hicksjt]

Originally Posted by tomdkat

Wow, that's quite the map construct. What I would do if I were you is choose ONE location that doesn't work in IE6. I would assign that element a red, 1px border and see where it appears when the page is rendered in IE6 and where it appears when the page is rendered in Firefox. That will tell you how IE is dealing with the positioning that is going on (hopefully).

It's like the links have disappeared. The strange thing is that some links in the legend work while others do not and they are all coded pretty much the same way.

Originally Posted by tomdkat

Also, I notice you're using an XHTML 1.0 DOCTYPE. I don't know how well IE6 will deal with that DOCTYPE. How does the page behave in IE7?

Yeah, I changed the DOCTYPE. Same results...

Originally Posted by tomdkat

Lastly, check out this example of a CSS image map. The example linked to on that page appears to work for me in IE6 (Maxthon 2.0.9 with IE6 rendering engine).

Thank you for the article. I actually replicated the this code from a CSS book. I've looked into it and do not see a solution. I've even contacted the book author for his thoughts. The more I think about this it seems one tiny thing is off. I am still looking at the code though.

[tomdkat]

Did you try the border trick to see where the links might have gone, given that you're manually positioning them?

Peace...

[hicksjt]

Originally Posted by tomdkat

Did you try the border trick to see where the links might have gone, given that you're manually positioning them?

Peace...

Ha! Okay, they are there, but, it's only the VERY bottom tip of the link element that's allowing it to become clickable. I have re-uploaded the HTML file for view (for IE 6):

http://www.photographyoptions.net/sa...s_college.html

EDIT: Okay, I think I just made it a little more confusing. That 1px border I have to the link element to see the red outline of the link WAS the clickable part. But the link itself should still work since a height and width are defined for it.

[tomdkat]

Looks like you've made some progress. I just viewed your site in IE6 (Maxthon 2.0.9 w/ IE6 rendering engine) and more of the targets in the top most map are clickable now.

Peace...

[WendyM]

Just two quick comments:

1) That "add a border to see what's happening" trick is invaluable. I learned that here from Gibble. Borders or different colored backgrounds help you get a really clear idea of what's happening with your stuff. Good tip, Tom.

2) Really a nice map, hicksjt. It looks great. Good luck getting it working!

[tomdkat]

Originally Posted by WendyM

1) That "add a border to see what's happening" trick is invaluable. I learned that here from Gibble. Borders or different colored backgrounds help you get a really clear idea of what's happening with your stuff. Good tip, Tom.

Thanks! Who is Gibble?

Peace...

[hicksjt]

The map is now working.

For those who may come across something similar to this here is the code below that seemed to do well in IE 6/7:

li {position:absolute;}
a {z-index:1000;}

The li elements may have overlapped the link anchors but with absolute positioning set for the li made it activate.

[tomdkat]

Great! Glad you got it figured out. How did you come across this solution?

Peace...