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
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).