probable z-index problem in FF - but not in Chrome or Safary other problem in IE

forums_noreply@adobe.com — Wed, 16 Jan 2013 16:13:44 GMT

This composition loads the image differently in different browsers. The map image loads properly in Chrome and Safari on top of the background and allows the help box to show on mouseover in areas of the map. However in IE it has a bounded box and load under the transparent background and in FF it also load under the background with no bounding box. (see images below).

Is there browser specific way to correct this issue?

Here is the code to load the image with only 2 regions to simplify here:

sym.stop('start');

$('<img id="region1" width="310" height="475" src="images/region1.png" usemap="#region1">'+

'<map name="region1">'+

// 1st row

'<area id="Dallam" shape="rect" title="County: Dallam, county seat: Dalhart" coords="29,17,97,58"/>'+

'<area id="Sherman" shape="rect" title="County: Sherman, County Seat: Stratford" coords="100,19,145,59"/>'+

'</map>').appendTo("#Stage");

$('#region1').css("cursor", "help");

sym.$('bg').css('z-index', 0);

$("area").on("click", function(){

switch($(this).attr('id')){

case "Dallam":

areaSelected($(this).attr('id'));

break;

case "Sherman":

areaSelected($(this).attr('id'));

break;

default:

//defaut code here

}

});

Adobe Community: Message List - probable z-index problem in FF - but not in Chrome or Safary other problem in IE

probable z-index problem in FF - but not in Chrome or Safary other problem in IE