travisbrown
Technical User
- Dec 31, 2001
- 1,016
I'm trying to mimic an image map for a UL background image using positioned <li>/<a> tags. Works perfectly in FF/Safari (Mac & PC), but IE/PC has this issue where only the perimeter is an active link; the body of the <a> isn't clickable.
I thought I might be able to do something with the Holly Hack, but can't seem to get anywhere.
Any suggestions?
I thought I might be able to do something with the Holly Hack, but can't seem to get anywhere.
Any suggestions?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
ul#navigation {
height:58px;
left:13px;
position:absolute;
top:45px;
width:974px;
z-index: 10000;
border: 1px solid red;
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
ul#navigation li {
position: absolute;
z-index: 11000;
}
ul#navigation li a {
display: block;
border: 1px solid #CC0000;
z-index: 12000;
overflow: hidden;
text-indent:-10000px;
}
ul#navigation li#about {
top: 9px;
left: 6px;
}
ul#navigation li#about a {
width: 126px;
height: 30px;
}
ul#navigation li#gallery{
top: 9px;
left: 138px;
}
ul#navigation li#gallery a{
width: 108px;
height: 35px;
}
ul#navigation li#appointments{
top: 9px;
left: 254px;
}
ul#navigation li#appointments a{
width: 203px;
height: 40px;
}
ul#navigation li#donations{
top: 6px;
left: 462px;
}
ul#navigation li#donations a{
width: 150px;
height: 27px;
line-height: 27px;
}
ul#navigation li#contact{
top: 5px;
left: 617px;
}
ul#navigation li#contact a{
width: 116px;
height: 25px;
}
ul#navigation li#blog{
top: 1px;
left: 738px;
}
ul#navigation li#blog a{
width: 74px;
height: 40px;
}
ul#navigation li#faq{
top: 1px;
left: 816px;
}
ul#navigation li#faq a {
width:52px;
height: 45px;
}
ul#navigation li#reviews{
top: 7px;
left: 874px;
}
ul#navigation li#reviews a{
width: 100px;
height: 20px;
}
-->
</style>
</head>
<body>
<ul id="navigation">
<li id="about"><a href="#" title="about us">about us</a></li>
<li id="gallery"><a href="#" title="gallery">gallery</a></li>
<li id="appointments"><a href="#" title="appointments">appointments</a></li>
<li id="donations"><a href="#" title="donations">donations</a></li>
<li id="contact"><a href="#" title="contact">contact</a></li>
<li id="blog"><a href="#" title="blog">blog</a></li>
<li id="faq"><a href="#" title="faq">faq</a></li>
<li id="reviews"><a href="#" title="reviews">reviews</a></li>
</ul>
</body>
</html>