Guten Tag,

ich habe mehrere <div>s nebeneinander und übereinander liegen.
Jedes <div> hat einen eigenen Tooltip. Leider bleibt der Tooltip im IE immer hinter dem nächstliegendem <div> versteckt.

Der eigentliche <div>

PHP-Code:

<div style='position: relative; border: 1px solid #cecece; width: 50px; height: 50px; background: #ffffff; float: left; margin: 5px; background-image:url(images/item/$item_id.gif); background-repeat:no-repeat; background-position: center'>

<a class='tooltip' href='?s=$url&user_unit_item_id=$user_unit_item_id&status=$status'>
    <img src='images/flat.gif' width='45' height='45'>
      <span>
        <table width='100%'>

          ......
</div> 


Und hier die CSS Datei

PHP-Code:

a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active, a.tooltip span { text-decoration: none }
a.tooltip span { display: none }
a.tooltip:hover span { position: absolute; display: block; border: 1px dashed #000; width: 250px; background: #ffff80; padding: 5px } 


Wenn ich a.tooltip span einen großen z--index Wert gebe funktioniert im Firefox und Opera alles perfekt, nur der IE reagiert gar nicht darauf und lässt den Tooltip hinter dem nächstliegendem <div>.

Könnt Ihr mir weiterhelfen?

Gruß Markus

Ich meine mich an einen Bug im Internet Explorer zu erinnern, über den ich auch schon mal gestolpert bin.
Da musste dem relativ positionierten Element, welches das absolute umgibt, ebenfalls ein z-index zugewiesen werden. Dieser muss natürlich geringer als der das absolut positionierten Elements sein.

Das kannst du ja mal ausprobieren.