IE Probleme mit <a> Tooltips

[chriditz]

Hallo !

Ich versuche auf einer Seite CSS Tooltips zu verwenden. Die relevanten Klassen sind

table.tooltip {padding: 5px 5px 5px 5px; border-width: 0px; width: 240px; border-color: #999999; border-style: solid; background-color: #000000; color: #999999; text-align: left; font-size: 12px;}
td.tooltip_linie {background: #999999; padding: 0px;}
td.tooltip_author {background: #000000; font-size: 11px; color: #FFFFFF;height:}
td.tooltip_headline {background: #000000; font-size: 12px; color: #FFFFFF;height:}

#tool a {color: #999999; text-decoration: none; cursor: default; }
#tool a:hover {color: #999999; background: #333333; text-decoration: none; }
#tool a span {display: none; position:absolute; } #tool a:hover span {display: block; color: #ffffff; background: #000000; width: auto; border: 1px solid #ffffff; padding: 10px; }

eingebettet habe ich das zum Beispiel wie folgt:

<span id='tool'><a href='#'>Wirtschaft resigniert...<span>
<table class='tooltip'> <tr> <td class='tooltip_headline' colspan='2'>Wirtschaft resigniert...</td> </tr> <tr> <td colspan='2'>Die schlechte wirtschaftliche Lage der Region zwingt einige Fans ihren Wohnsitz zu verlegen, um neue Arbeit zu finden. Aufgrund der geografischen Entfernung bleiben diese Fans dem Stadion fern.</td> </tr><tr><td>Fans (+/- Anzahl)</td><td><div align='right'>-750</div></td></tr><tr><td class='tooltip_author'colspan='2'><div align='right'>(von XXX)</div></td></tr></table>
</span></a></span>

Bei Firefox (1.5.0.6) funktioniert auch alles wie es zu erwarten war, aber der Internet Explorer bereit noch Probleme. Die Tooltips werden zwar zunächst korrekt angezeigt, jedoch wenn der Mauszeiger den Bereich des Links, bleibt ein schwarzer Kasten vom Tooltip zurück. Dieser überlagert dann nicht nur den Inhalt der Page der unter ihnen liegt, sondern auch Tooltips die vorher geöffnet wurden und nachher vielleicht ein weiteres Mal angezeigt werden sollen.

Kann mir jemand sagen was ich falsch mache ? Bin absoluter CSS Anfänger und komm da einfach nicht hinter.

Vielen Dank im Voraus,
Christian

[MudGuard]

Hi,

<span id='tool'><a href='#'>Wirtschaft resigniert...<span>
<table class='tooltip'>

span darf keine Tabelle enthalten.
Das span dürfte aber überflüssig sein, da es eh nur die Tabelle enthält.
Aber auch a darf keine Tabelle enthalten ...

Bei Firefox (1.5.0.6) funktioniert auch alles wie es zu erwarten war,

Naja, das hängt von der Erwartungshaltung ab ...
Ich erwarte, daß Browser invalide Dokumente nicht anzeigen.

aber der Internet Explorer bereit noch Probleme. Die Tooltips werden zwar zunächst korrekt angezeigt, jedoch wenn der Mauszeiger den Bereich des Links, bleibt ein schwarzer Kasten vom Tooltip zurück. Dieser überlagert dann nicht nur den Inhalt der Page der unter ihnen liegt, sondern auch Tooltips die vorher geöffnet wurden und nachher vielleicht ein weiteres Mal angezeigt werden sollen.

Passiert das auch, wenn Dein Tooltip nur Elemente enthält, die dort auch enthalten sein dürfen?

cu,
Andreas

[chriditz]

Hallo

Passiert das auch, wenn Dein Tooltip nur Elemente enthält, die dort auch enthalten sein dürfen?

Ja. Auch dann hab ich das Problem. Und danke daß du mich darauf hinweist daß das mit der Tabelle nicht valide ist. Schade daß du mir keinen Tipp zukommen lassen möchtest, wie ich es besser machen könnte, und der Inhalt trotzdem möglichst ähnlich dargstellt wird. So fällt es einem Anfänger nicht gerade leicht, gezielt zu suchen. Aber egal.

[Cyx23]

Hallo,

Kann mir jemand sagen was ich falsch mache ? Bin absoluter CSS Anfänger und komm da einfach nicht hinter.

Du hast offenbar an mehreren Stellen den Hintergrund so angegeben,
z.B.:
table.tooltip {    background-color: #000000;

Also da ggf. ändern, oder z.B. am Ende des CSS so korrigieren:
#tool a span *{ background:inherit;}

Grundsätzlich ist es aber vielleicht erstmal sinnvoll den HTML-Code
etwas valider zu gestalten, die span-Elemente müßten wohl eher
divs sein, die Tabelle ist eigentlich unnötig.
Wahrscheinlich kommst du mit einem Div aus und ggf. einer display:block
Anweisung im CSS für das a-Tag.

Sofern die Browser ein :hover per CSS auch beim Div umsetzen ist
der Link auch unnötig.

Grüsse
Cyx23

[chriditz]

Hallo, dank dir zunächst für deine Antwort. Werde das mit dem background mal versuchen...

Grundsätzlich ist es aber vielleicht erstmal sinnvoll den HTML-Code
etwas valider zu gestalten, die span-Elemente müßten wohl eher
divs sein, die Tabelle ist eigentlich unnötig.
Wahrscheinlich kommst du mit einem Div aus und ggf. einer display:block
Anweisung im CSS für das a-Tag.

Kannst du mir eventuell ein gutes Beispiel/schnelles Tutorial im Netz empfehlen, wo man sieht wie man die Tabelle am besten durch DIV ersetzen könnte ? Die Darstellung soll ja aus Übersichtsgründen schon in etwa so bleiben...

Sofern die Browser ein :hover per CSS auch beim Div umsetzen ist
der Link auch unnötig.

Naja, aber in dem Augenblick, wo das auch im IE6 angezeigt werden soll, bleibt einem ja leider nichts anderes als das a-Tag übrig. Oder gibt es da noch andere Möglichkeiten, wenn man JavaScript vermeiden möchte ? Hatte da eigentlich sehr lange gesucht...

Nochmals Danke soweit,
Christian

[chriditz]

Hallo nochmal,

lag wirklich an dem mehrfachen Background. Danke !
Jetzt kann ich mich damit rumärgern das valide zu biegen *g*

Ciao und viele Grüße,
Christian