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/