图像地图/定位锚在定位图像上方（Firefox问题）

Question

I'm noticing a strange behaviour in Firefox.

I have a banner that's positioned absolutely and centred, so I use a bit of a css trick to do this:

#banner { 
  position: absolute; 
  top: 85px; 
  z-index: 1; 
  width: 1280px; 
  left: 50%; 
  margin-left: -640px; 
}

This works just fine across my target browsers.

To add some complexity, this banner has hot spots.

So, I tried attaching an image map to the image. This works fine in IE7/8. No luck with Firefox. Next, I tried putting an anchor inside the banner container, which worked visually (ie I put a border on the anchor to see if it was positioned correctly), but it does not respond to a click event, even with javascript.

Here is the markup that I've tried:

<div id="banner">
    <img src="/images/banners/splash.jpg" alt="" width="1280" height="481" usemap="#splashMap" />
    <a href="#" id="banner-anchor1" title="">Some Text</a>    
</div>
    <map name="splashMap" id="splashMap">
        <area shape="rect" coords="174,192,304,464" href="#" alt="" />
        <area shape="rect" coords="277,76,397,169" href="#" alt="" />
        <area shape="rect" coords="306,360,415,470" href="#" alt="" />
        <area shape="rect" coords="662,347,763,479" href="#" alt="" />
    </map>

With the following css:

#banner a { 
display: block; 
text-indent: -999px; 
position: absolute; 
z-index: 2; 
left: 50%; 
border: 1px solid red; 
}
#banner-anchor1 { 
top: 133px; 
width: 129px; 
height: 289px; 
margin-left: -467px; 
}

Both the anchor and image map options work in IE.

Thankfully the shapes are rectangles, so I have some flexibility, but this is otherwise a strange case.

Is there a way to overcome this in Firefox, or different technique I can use to centre an absolutely positioned element?

Update

There was a z-index conflict with other elements. There was a div around the body content, and the banner laid over top of that div. The z-index on the content div was causing trouble in FF with the anchors, even though the z-index was lower - I guess because they don't share the same parent. Odd how IE didn't have a problem with this.

Answer 1

My first tip: don't use imagemaps. They're very user unfriendly, and search engines have a hard time to follow the links as well. It's kind of regarded as a deprecated technique (although not officially, I believe).

Anyway, I don't know what it should look like (where should the anchor be positioned?) but in Chrome it all works, except the negative margin on the #banner-anchor1 puts it in a weird place.

In firefox it all seems to work as well if I remove the margin on the link...

Example: http://jsfiddle.net/96etN/1/

Answer 2

Try making sure you're using position: relative on that Anchor element? I do something very similar in a visual glossary, Where I mark rectangles over top of an image to allow users to click and see more information about a document's sections, And it works fine in all browsers.

One other thing to note, is that if you're going to nest multiple rectangles and want the same offsets for them, You'll need a wrapper to reset the relative position to 0,0 of your parent container, For example

<div class="myContainer">
 <div class="myWrapper">
  <a href="#" id="myElement1" class="myTarget" />
 </div>
 <div class="myWrapper">
  <a href="#" id="myElement2" class="myTarget" />
 </div>
 <img src="foo" id="myTitleImage" />
</div>

#myContainer {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 80%;
}

.myWrapper { 
 position: absolute;
}

.myTarget {
 position: relative;
 display: block;
}

#myElement1 {
 top: 10px;
 right: 10px;
 width: 50px;
 height: 20px;
}

etc. etc.