css toolbox verschwindet bei hover über link im ie

werner02 · #1 (**permalink**) 28.10.2008, 13:30

Hallo erstmal,

folgendes Problem:
ich habe ein CSS, welches ermöglicht eine Toolbox beim Hover über einen Link anzuzeigen. Das funktioniert soweit auch wunderbar in allen relevanten Browsern. Nur sobald in dieser Toolbox ein Link hinterlegt ist, und man im Internet Explorer mit der Maus über diesen Link fährt verschwindet sie.
FF und Opera haben keine Probleme damit.
Das CSS:

Code:

	
  a.tooltipp {
		position: relative;
    color:#E6E6E6;
    text-decoration: None;
  }
  a:visited.tooltipp {
   	color:#E6E6E6;
    text-decoration: None;
  }
  a:link.tooltipp {
  	color:#E6E6E6;
    text-decoration: None;
  }
  a:active.tooltipp {
  	color:#E6E6E6;
    text-decoration: None;
  }

	a.tooltipp span {
    opacity: 0.8;
		-moz-opacity:0.8;

    text-decoration: None;
	  display: none;
	  position: absolute;
	  top: 10px;
    left : -150px;
	  width: 400px;
	  padding: 5px;
	  z-index: 300;
    background-color: #D3D3D3
    background-image: url(./bg.gif);
	  background: #D3D3D3;
	  color: #000;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px; 
	}

	a:hover.tooltipp {
	  font-size: 99%; /* WA IE */
    text-decoration: None;
	}

	a:hover.tooltipp span {
	         display: block;
           text-decoration: None;
	}

Verwendung auf der Seite:

HTML-Code:

<a href="#" style='z-index:300;'  class=tooltipp><font color=black>Suche</font><span>Link: <a href="http://www.google.de">google</a></span></a>

Vielleicht sieht einer den Fehler oder weiß einen Workaround. Wär auch nicht der erste...

Danke schonmal im Vorraus.

mfg
Werner02

EvT · #2 (**permalink**) 28.10.2008, 14:45

Vermutlich handelt es sich um diesen IE-Fehler:
IE Pure CSS Pop Ups Bug

werner02 · #3 (**permalink**) 28.10.2008, 17:05

hallo, danke für die antwort.

leider hat mir der workaround keine lösung gebracht...

ich musste leider feststellen, dass ich noch etwas entscheidendes vergessen habe.

und zwar wird im span eine neue tabelle abgelegt. was verhindert, dass der firefox und andere browser das neue a-tag als ende des alten ansehn(wieso die das auch immer machen, aber ein link im link macht ja normal auch keinen sinn, nur wird die definition des span anscheinend vollkommen ignoriert bzw. abgebrochen. Sieht man mit dem DOM Inspector auch recht schön...). Das ganze interpretiert nur leider der IE7 anders als andere Browser.

Der HTML-Code muss deshalb folgendermasen aussehen:

HTML-Code:

<a href="#" class=tooltipp>
  <font color=black>Suche</font>
      <span><table><tr><td>
           Link: <a href="http://www.google.de">google</a>
      </td></tr></table></span>
</a>

fricca · #4 (**permalink**) 28.10.2008, 17:20

Das Konstrukt ist grob invalide. Weder in einem Link noch in einem Span darf eine Tabelle liegen. Links in Links geht gar nicht. [Font ist aus dem Mittelalter.]
Stu Nicholls wendet eine solche invalide Verschachtelung an, um dem IE < 7 Dropdown-Menüs beizubringen. Dort sieht aber auch nur der entsprechende IE dieses Teil.
Solange du allen Browsern derartiges vorsetzt, darfst du dich nicht über Inkonsistenzen beschweren.

Und bitte: Keine weiteren Codeschnipsel mehr. Lies die Hinweise für Fragende.

werner02 · #5 (**permalink**) 28.10.2008, 17:47

Hallo,

danke für den Hinweis, dass mein Wissen anscheinend aus dem Mittelalter stammt. Find ich ein bisschen anmaßend, aber seis drum. Ich bin auch gerade dabei eine Intranet- Anwendung "aus dem Mittelalter" zu überarbeiten.

Ich zwinge niemanden meine Codeschnippsel, welche nach ca. 1 Minute lauffähig sind, zusammen zu setzen. Aber sie haben doch auch so die Wirkung gehabt, dass du mir sagen konntest, dass Tabellen in Spans invalide sind.
Aber wenn das so ist, dann muss ich mir eine andere Methode suchen Tooltipps zu erstellen. Vielleicht hast du ja eine andere Methode für mich?

Ich lass mich auch gerne aufklären, nur zweideutige Kommentare bringen keinen weiter. Ich bin zugegebenermaßen nicht sonderlich css bewandert. Aber das ist auch mit ein Grund wieso hier Hilfe suche. Und wohl auch von einigen anderen.
Das nächste mal gibts auch ein vollständiges html- Beispiel, zum c&p. Mit Links kann ich leider nicht dienen.

fricca · #6 (**permalink**) 28.10.2008, 17:55

Zitat:

Zitat von werner02

Vielleicht hast du ja eine andere Methode für mich?

Zeichne deine Inhalte mit sinnvollen Elementen aus. Wende Hover auf das dann vorhandene Element an.
Nein, ich weiß nicht, was für dich sinnvoll ist. Sowas kann man an Codeschnipseln nicht beurteilen.
Lesestoff: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

Zitat:

Ich lass mich auch gerne aufklären, nur zweideutige Kommentare bringen keinen weiter.

Keine Ahnung, worauf du anspielst. Was genau findest du nicht eindeutig?

Zitat:

Ich bin zugegebenermaßen nicht sonderlich css bewandert.

Dann ist die von mir bereits verlinkte Variante von Stu Nicholls nichts für dich. Nutze JavaScript, um im IE < 7 deinen Tooltip sichtbar zu machen.

Zitat:

Das nächste mal gibts auch ein vollständiges html- Beispiel, zum c&p.

Warum erst das nächste Mal? Man kann über "den IE" (welchen denn?!) keine Aussagen machen, wenn man die Umgebung nicht kennt.
Lesestoff: DOCTYPE-Switch und seine Auswirkungen

werner02 · #7 (**permalink**) 28.10.2008, 19:08

Zitat:

Zitat von fricca

Zeichne deine Inhalte mit sinnvollen Elementen aus. Wende Hover auf das dann vorhandene Element an.
Nein, ich weiß nicht, was für dich sinnvoll ist. Sowas kann man an Codeschnipseln nicht beurteilen.
Lesestoff: Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design

Danke für den Link.
ich brauche eine Toolbox um genauere Daten zu einem Kontakt einzublenden, und mehrere Links darin um ein TAPI ocx anzusprechen. Ich bin nicht darauf gekommen, dass Spans dazu ungeeignet sind, da wie gesagt alle anderen Browser es so gehandhabt haben, wie ich mir das vorgestellt habe. Nur eben die beiden IE Varianten 6 und 7 nicht. Der Tooltipp verschwindet ja auch dann erst, wenn man in ihm mit dem Cursor auf den Link fährt, was das anklicken unmöglich macht.

Zitat:

Zitat von fricca

Keine Ahnung, worauf du anspielst. Was genau findest du nicht eindeutig?

War auf den Kommentar zu meinem font-Tag bezogen. Der in dem, wirklich sehr kurzen Schnippsel, keinerlei Bedeutung hatte... Wusste deshalb auch nicht was der Kommentar dazu sollte

War aber auch nur so kurz wie möglich zusammenkopiert und modifiziert um das Problem sichtbar zu machen.

Zitat:

Zitat von fricca

Warum erst das nächste Mal? Man kann über "den IE" (welchen denn?!) keine Aussagen machen, wenn man die Umgebung nicht kennt.
Lesestoff: DOCTYPE-Switch und seine Auswirkungen

Beim nächsten Problem meinte ich, da mein Code, wie ich gerade erfahren habe, nicht brauchbar ist, macht es auch wenig Sinn ihn zusammenzufassen. Da der Bug nicht der IE ist, sondern diesmal ich selber bin. Mach ich jetzt aber trotzdem schnell:

HTML-Code:

<html>
<head>
<title>test</title>
<style type="text/css">
<!--

a.tooltipp {
		position: relative;
    color:#E6E6E6;
    text-decoration: None;
  }
  a:visited.tooltipp {
   	color:#E6E6E6;
    text-decoration: None;
  }
  a:link.tooltipp {
  	color:#E6E6E6;
    text-decoration: None;
  }
  a:active.tooltipp {
  	color:#E6E6E6;
    text-decoration: None;
  }

	a.tooltipp span {
    opacity: 0.8;
		-moz-opacity:0.8;

    text-decoration: None;
	  display: none;
	  position: absolute;
	  top: 10px;
    left : -150px;
	  width: 400px;
	  padding: 5px;
	  z-index: 300;
    background-color: #D3D3D3
    background-image: url(./bg.gif);
	  background: #D3D3D3;
	  color: #000;
	  -moz-border-radius: 5px;
	  -webkit-border-radius: 5px;
	}

	a:hover.tooltipp {
	  font-size: 99%; /* WA IE */
    text-decoration: None;
	}

	a:hover.tooltipp span {
	         display: block;
           text-decoration: None;
	}

-->
</style>

</head>
<body>
    <center>
    <a href="#" class=tooltipp>
	Suche:
      <span><table><tr><td>
           Link: <a href="http://www.google.de">google</a>
      </td></tr></table></span>
    </a>
    </center>



</body>
</html>

Denke die Angaben reichen soweit, damit es richtig interpretiert wird.
Wie gesagt: Einfach mal mit FF aufrufen, in der Mitte über den Text gehn, und den Link in der Box anklicken. Und das Verhalten mit dem IE7 vergleichen. Falls das noch relevant ist.

Schönen Feierabend noch.

fricca · #8 (**permalink**) 28.10.2008, 19:17

Zitat:

Beim nächsten Problem meinte ich, da mein Code, wie ich gerade erfahren habe, nicht brauchbar ist, macht es auch wenig Sinn ihn zusammenzufassen. Da der Bug nicht der IE ist, sondern diesmal ich selber bin. Mach ich jetzt aber trotzdem schnell

Du hast recht. Es hat keinen Sinn, weiter über diesen kaputten Code zu reden.
Ich habe dir Hinweise für eine Herangehensweise gegeben. Bisher hast du das ignoriert. So kommst du nicht weiter. Du wirst hier niemanden finden, der dir deinen Code schreibt.

Zitat:

Denke die Angaben reichen soweit, damit es richtig interpretiert wird.

Nein.
Lies den zweiten Link.
Validier deinen Code.

Das center-Element ist ebenso veraltet, wie font. Du solltest mal ein aktuelles Buch lesen.

Zitat:

Schönen Feierabend noch.

Ebenso.
Ich bin dann mal weg.

werner02 · #9 (**permalink**) 28.10.2008, 20:09

Zitat:

Zitat von fricca

... Bisher hast du das ignoriert...

Du scheinst ja extrem gute Menschenkenntnisse zu besitzen, wenn du an den paar Zeilen die ich geschrieben habe, auf so eine Schlussfolgerung kommst!

Zitat:

Zitat von fricca

Das center-Element ist ebenso veraltet, wie font.

Schön, dass ich mich noch mit anderen Sachen herumschlagen darf als mit solch furchtbar veralteten Html-Tags in 20 Zeilen Beispielcode.

Zitat:

Zitat von fricca

Du solltest mal ein aktuelles Buch lesen.

Da hast du recht, dann spar ich mir vielleicht in Zukunft die Kommunikation mit manchen Menschen.

fricca · #10 (**permalink**) 28.10.2008, 20:15

Zitat:

Zitat von werner02

Du scheinst ja extrem gute Menschenkenntnisse zu besitzen, wenn du an den paar Zeilen die ich geschrieben habe, auf so eine Schlussfolgerung kommst!

Quatsch. Ich beziehe mich auf deinen Code, sonst nichts.
Ich habe dir in meiner ersten Antwort gesagt, worin die Syntaxfehler liegen (obwohl der Validator das viel besser kann, als ich). Ich habe dir in meiner zweiten Antwort eine grundsätzliche Herangehensweise für die Auszeichnung mit HTML genannt.
Und jetzt schau dir deinen Code an.

Ich kann dir hier keinen Grundkurs in HTML geben. Und ohne richtiges und sinnvolles HTML kann man nicht über Darstellung (=CSS) reden. Nur du selbst kannst lernen und weiterkommen. Das braucht Zeit und erfordert viel Lektüre. Für einen Einstieg habe ich dir Links gepostet. Wenn du sie nicht liest (und das Gelesene auch anwendest!) kann ich dir nicht weiterhelfen.
Viel Erfolg weiterhin.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fertiges Drop-Down Menü ins Layout einfügen	VoB	CSS	6	15.03.2011 16:14
link hover soll weitere definierte links hovern	Andreas1977	CSS	17	07.10.2009 22:03
Multi-Level Navigation mit Grafiken	koncrete	CSS	3	02.08.2008 02:28
CSS und IE - Link als Block macht Probleme	Morjo	CSS	4	25.06.2008 13:28
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25