Javascript-форум - Выделение на карте

Разбираю один пример. В Firefox, Chrome работает как задумано авторами, а в IE6, Opera не выделяет рамкой лица.
Посмотреть проблему здесь
Код :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Image Maps</title>


<style type="text/css">

#pic {
  width: 640px;
  height: 425px;
  position: relative;
}

#pic ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


#pic a {
  position: absolute;
  width: 100px;
  height: 120px;
  text-indent: -1000em;
}

#pic a:hover {
  border: 1px solid #fff;
}

#pic .rich a {
  top: 15px;
  left: 95px;
}

#pic .andy a {
  top: 115px;
  left: 280px;
}

#pic .jeremy a {
  top: 250px;
  left: 425px;
}

<!--
-->
</style>
</head>

<body>

<div id="pic">
<img src="images/group-photo.jpg" width="640" height="425" alt="Richard, Andy and Jeremy" />
<ul>
<li class="rich"><a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a></li>
<li class="andy"><a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a></li>
<li class="jeremy"><a href="http://www.adactio.com/" title="Jeremy Keith">Jeremy Keith</a></li>
</ul>
</div>


</body>
</html>

Решил проблему так:

#pic a {
  position: absolute;
  width: 100px;
  height: 120px;
  text-indent: -1000em;
  background-image:url(images/spacer.gif); /*!!!  прозрачный 1x1*/
}

Но хотел бы знать в чем суть проблемы.
#pic a {display:block} не помогало.