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.
Leave a comment