0

I'm using ImageMapster to generate fills and outlines around image map areas, it's giving me problems with IE not displaying something that chrome, safari, Firefox have absolutely no problem with.

http://sa-neighborhoodsustainability.org/map1a.php

when opening the above link in IE, there are 2 areas that remain white. these are areas that overlap a larger area, and are excluded from it with a repeat of the area and a nohref tag along with sharing the same name as the larger area.

Does anyone have an ideas?

Thanks

user1550272
  • 5
  • 2

1 Answers1

1

It looks like there are a couple things at play here. First - when I open that link in IE9 it renders in "quirks" mode. Your HTML has no DOCTYPE, HTML or BODY tags. HTML5 technically allows you to omit HTML, HEAD and BODY, though it still freaks people like me out to see that. However it does NOT allow you to omit the DOCTYPE tag. It seems that IE9 defaults to quirks mode when there's no DOCTYPE so you should start by adding that:

<!doctype html>

That should solve the IE9 problem.

This same issue will still show up in IE6-8. However, this is due to limitations of those browsers when using areas within areas.

There is an option called fillColorMask which lets you specify the fill color to use for interior areas for IE6-8 since masks don't really work. I apologize because I just now realized this is not really documented. In your case, you should set 

fillColorMask: '8CAD5A'

for the left area, and 

fillColorMask: '99BA67'

for the right area (these colors match the color that they are filled with already, so it should cause nothing to appear to happen to them).

Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • Thanks for the Answer!.. It works great. Only problem is that I generate those parameters with php and now the mask color of the larger areas doesn't match the smaller areas within them, making the IE maps less "accurate" than when displayed in FF. Can you think of an easy way to fix it? It's not a huge deal as the actual color does appear on hover. Chalk it up as another win for IE over my sanity. – user1550272 Jul 30 '12 at 14:01
  • It's never going to be quite right in IE6-8 when using fills because it uses a different technology for rendering the hotspots. It should look right in IE9 though. If you hit F12 in IE9, verify that "Document Mode" says "IE9 standards." – Jamie Treworgy Jul 30 '12 at 15:29