Micha1982: Tooltipp-Problem mit "relative" bei Opera

Beitrag lesen

Hallo Zusammen,
Ich habe innerhalb meiner Seite ein paar Bilder, bei denen beim rübergehen mit der Maus ein kurzer Text erscheinen soll.
Damit die Tooltipps an einer vernünftigen Stelle angezeigt werden, habe ich direkt beim Tooltipp "position: relative;" ausgewählt.
Unter Firefox und IE sieht das auch vernünftig aus (Text erscheint unter dem Bild, egal wie groß das Bild ist!); nur bei Opera erscheint der Text irgendwo mittig im Bild, als wenn der Ausgangspunkt nicht das Bild, sondern die obere Kante vom Bild wäre.

Weiß jemand eine Lösung für das Problem?

Danke im vorraus
Micha

P.S.: Ich habe von html kaum Ahnung, also bitte noob-gerechte Antworten ;)

Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html><head><title>test</title>  
  
<style type="text/css">  
 <!--  
  
 /* Tooltip */  
a.tooltip  {  
  position: relative;  
  text-decoration: none;  
  }  
  
a.tooltip span {  
  display: none;  
}  
  
a.tooltip:hover span {  
  display: block;  
  position: absolute;  
  top: 20px;  
  left:;  
  width: 150px;  
  z-index: 100;  
  color: #000000;  
  border:1px solid #000000;  
  background: #FFFFCC;  
  font: 12px Verdana, sans-serif;  
  text-align: center;  
  }  
  
}  
  
-->  
</style>  
  
  
</head><body>  
  
<br /><br /><br /><br />  
		<a class="tooltip"><input type="image" value="Formular abschicken..." style="width:70px;height:85"  
				name="Geraete_auswaehlen"  
		    src="Bilder/warenkorb.jpg"> <span>select items for occupation calender</span>  
		</a>  
    <a class="tooltip"><input type="image" value="Formular abschicken3..." style="width:70px;height:85"  
        name="Geraete_loeschen"  
        src="Bilder/96px-User-trash.svg.png"> <span>Delete selected items from personal list</span>  
    </a>  
  
<br /><br /><br /><br />  
    <a class="tooltip">  
        <input type="hidden" value="eigene_Belegung" name="eigene_Belegung">  
        <input type="image" src="Bilder/Meins2.jpg"> <span>my reserved items</span>  
		</a>  
  
</body></html>