Tag Archives: display:block

How to get display:block links working over images in IE

Leave a reply

One of my clients at work wanted different parts of the header and footer images to link to different pages, I used a CSS trick to have transparent a links to get and image map type thing to work, it worked great in Firefox, but didn’t work in IE6/7, here’s what I had:

#header a,#footer a {
  display: block;
  text-decoration: none;
  position: absolute;
}
a#header_link{top:17px;left:481px;width:166px;height:69px;}
a#footer_link_1{top:35px;left:0;width:450px;height:51px;}
a#footer_link_2{top:35px;left:453px;width:125px;height:51px;}
a#footer_link_3{top:35px;left:577px;width:63px;height:51px;}

Notice I used position:absolute, it works fine if you wrap them inside a position:relative div. To get it to work in IE6 and IE7, I had to specify a background color and set opacity of that element to 0:

#header a,#footer a {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  background-color: #ffffff;
  display: block;
  text-decoration: none;
  position: absolute;
}

Not a huge fan of IE.