CSS Tooltip <span> verdeckt Text aber keine Grafiken. Warum?

[alexS]

Hallo
ich habe einen Tooltip wenn man mit der Maus über eine Grafik fährt. Das funktioniert auch.
Wenn man jedoch im IE 7.0 den Tooltip hat und sich daruter eine Grafik befindet, wird diese Grafik nicht verdeckt, sondern nur der Text.
Siehe Screenshot:


Wenn an mit dem Mauspfeil über das die obere Grafik (i) fährt erscheint der Tooltip. Die Grafik des darunterliegenden (i) wird jedoch nicht verdeckt, sondern nur der darunterliegende Text und das Formularfeld.

Das CSS vom Tooltip sieht we folgt aus:

Code: Alles auswählen

a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: absolute;
  text-decoration: none;
  font-style: italic;
  color: #0000ff;
  }
 
a.tooltip:hover {
  color: #0000ff;
  }

a.tooltip span {
  display: none; 
  text-decoration: none;
}

a.tooltip:hover span {
  display: block;
  position: relative;
  padding: 2pt;
  top: 15px;
  left: 0;
  width: 200px;
  z-index: 100;
  color: #000000;
  border:2px solid #000000;
  background-color:#ffffff; 
  background: #FFFFCC;
  font: 12px Verdana, sans-serif;
  text-align: left;
  }
 
a.tooltip span b {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #ec6d1c;
  background-color: #e8e8e8;
  border: 0px;
  border-bottom: 1px solid black;
}

Kann mir da jemand weiterhelfen, woran das iiegt?

Im Frefox 3.0.8 funktioniert das gut und die Grafik wird verdeckt.

Vielen Dank für jede Hilfe...

[the_fan]

hast du die grafik durch irgendeinen teil im css definiert?
wenn ja, setz mal nen z-index von z.b. 10 oder 50 hin.
das tooltip hat den z-index 100, wenn hover ausgeführt wird - es sollte also eigentlich alles überlappen.. eventuell musst du den anderen objekten aber explizit einen z-index zuweisen.