Johannes: display:none / display:block

Beitrag lesen

Hallo, kann mir bitte jemand sagen warum folgender Code nur in Mozilla ordnungsgemäß funktionert, jedoch im IE (5.5 und 6.0) nicht.
Es sollte eigentlich nur der Text eingeblendet werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Fertigung</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

body {
    background-color: #CCCCCC;
    color: #808080;
    font-size: 1.4em;
    font-family: verdana, arial, helvetica, sans-serif;
 text-align: left;
}

a {
 border-style: none;
 text-decoration: none;
 display: block;
}

a img {
 height: 120px;
 border-width: 1px;
 border-color: black;
}

a:hover img{
 border-color: #808080;
}

a span {
 display: none;
}

a:hover span {
 position: fixed;
 top: 50%;
 left: 60%;
 display: block;
}

</style>

</head>
<body>
 <li>
  <a href="#1" style="position: absolute; top: 15%; left: 35%; ">
   <img src="images/bend1.jpg">
   <span>Kantanlagen</span>
  </a>
 </li>
 <li>
  <a href="#1" style="position: absolute; top: 40%; left: 20%;">
   <img src="images/laser1.jpg">
   <span>Laser</span>
  </a>
 </li>
 <li>
  <a href="#1" style="position: absolute; top: 65%; left: 35%;">
   <img src="images/weld1.jpg">
   <span>Schweißanlagen</span>
  </a>
 </li>
</body>
</html>

mfg Johannes