1

Before I get a bunch of down-votes, I wanted to point out that I think I understand why it's not working but I wanted to see if anyone in the community has ran into this dilemma before and what, if anything they were able to do to overcome the problem.

So, I have a clickable image map. For reasons not important, it is being placed into a div (let's call it B) which exists as a second child of the <body> tag. Then, this divs sibling (lets call it A) holds an entire page wrapper and the rest of the site content. What that means is B is pretty much working as a background image and A holds the entire site. There is a transparent div in A that fills in a gap to allow B to come (show) through. Unfortunately, my client has decided he wants to make A an image map but keep the markup the same. The image map does what it's supposed to do and is clickable in IE, however, in better browsers (Chrome, FF), the image map is not clickable because theoretically A overlaps B thus making the image map non-usable.

My question is, why does IE work properly and FF and Chrome fail? And, what sort of methods can I use in order to force FF to understand that although B is behind A, I need B to be clickable? Is this even possible? CSS Z-Index? Anything...?

Markup to explain the situation:

<div id="wrap" class="A">Site Content</div>
<div id="bg" class="B"><img src="" /><map></map></div>
spez86
  • 732
  • 1
  • 11
  • 24
  • Just because IE has the *desired* behavior, that doesn't mean it is behaving *correctly*. IE has a long standing history of doing things wrong, I wouldn't be surprised if it's wrong here too. If a div is laying on top of another div, it is capturing all of the events (click, etc.) that are firing, which is why the elements underneath are inaccessible. – cimmanon Sep 21 '12 at 17:38

1 Answers1

1

Only IE lets events "through" transparent elements. Like cimmanon stated that doesn't mean it is behaving correctly

Internet explorer 8 event fall through transparent parents

You can pass click events from transparent area of A to B but that requires heavy javascript-ing. There is no CSS solution to your problem.

Community
  • 1
  • 1
daimonion
  • 11
  • 1