Разбираю один пример. В 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} не помогало.
