IE: Links hinter absolut pos. Elementen "scheinen durch"?

[Anton K.]

Hallo!

Ich möchte auf einer Communite-Site die Möglichkeit umsetzen, ein kleines Menü anzeigen zu lassen, dass anzeigt wird, wenn man über bestimmte Links (Usernamen) innerhalb eines Textes fährt.

In so ziemlich allen Browsern funktioniert das auch, nur der IE (alle Versionen, auch 7.0) spinnt und zeigt manchmal Text (nur Links!) an, die eigentlich vom Menü verdeckt werden sollten.

das ganze funktioniert folgendermaßen:

TEXT TEXT TEXT
<div class="userName">
<div class="userNameOver" id="x">
   (INHALT DES MENÜS)
</div>
<a href="?user=22" onmouseover="show('x');">Username</a>
</div>
MEHR TEXT TEXT

CSS (Schriftformatierungen der Übersichtlichkeit halber entfernt)

.userName {
 display: inline;
 position: relative;
}

.userNameOver {
 z-index: 200;
 position: absolute;
 top: 20px;
 left: 1px;
 white-space: nowrap;
 background: #F5F5F5;
 display: none;
}

Die show(e)-Funktion ändert einfach nur display:none in display:block; ...

Mach ich irgendwas falsch?

Danke im Vorraus!

[Marian]

Hallo Anton,

Ich möchte auf einer Communite-Site die Möglichkeit umsetzen, ein kleines Menü anzeigen zu lassen, dass anzeigt wird, wenn man über bestimmte Links (Usernamen) innerhalb eines Textes fährt.

<div class="userName">
<div class="userNameOver" id="x">
   (INHALT DES MENÜS)
</div>
<a href="?user=22" onmouseover="show('x');">Username</a>
</div>

Was mir auffällt (ob es daran liegt, weiß ich nicht, aber trotzdem): Wenn der Link gehovert wird, wird das Menü angezeigt. Wenn man dann auf das Menü draufgeht (mit der Maus), ist der Link nicht mehr gehovert.

Ich würde es so machen:

<div class="userName">  
 <div class="userNameOver">  
  MENÜ  
 </div>  
 <a href="?user=22">Username</a>  
</div>

und dann CSS:

.userName .userNameOver { display:none; }  
.userName:hover .userNameOver { display:block; }

Dann schließt du auch Benutzer ohne JavaScript nicht mehr aus.

Viele Grüße aus Freiburg,
Marian

[A. Katzer]

Danke für die Antwort!

Nebenbemerkerung: User ohne Javascript haben auf der Site keine onderlichen Erfolgschancen, da gibt es viel zuviel Zeug, dass sich mit CSS einfach nicht mehr machen lässt. Es wird keine Mainstream-Site, also ist dieser "Verlust" zu tolerieren ...

Mein Problem mit deiner Lösung: sie funktioniert nicht, wenn es mehrere Menüs pro Seite gibt. Es sollen ja nicht alle gleichzeitig angezeigt werden. Ich könnte zwar dynamisch mehrere <style>-Bereiche, die mit IDs arbeiten generieren, aber das löst mein ursprüngliches Problem nicht.

Ach ja, neues Problem: Der IE zeigt den Inhalt des <a>-Tags (und wohl der ganzen userName-Klasse) nicht an, wenn der Text nicht in einem Container mit position: relative ist. Warum? Ich werd noch wahnsinnig mit diesem Browser ...

[Marian]

Hallo Anton,

Nebenbemerkerung: User ohne Javascript haben auf der Site keine sonderlichen Erfolgschancen, da gibt es viel zuviel Zeug, dass sich mit CSS einfach nicht mehr machen lässt. Es wird keine Mainstream-Site, also ist dieser "Verlust" zu tolerieren ...

Versuch wenigstens, die Seite auch ohne JavaScript soweit wie möglich benutzbar zu machen

Mein Problem mit deiner Lösung: sie funktioniert nicht, wenn es mehrere Menüs pro Seite gibt. Es sollen ja nicht alle gleichzeitig angezeigt werden. Ich könnte zwar dynamisch mehrere <style>-Bereiche, die mit IDs arbeiten generieren, aber das löst mein ursprüngliches Problem nicht.

Hast du es ausprobiert? Wenn ja: komisch. Wenn nein: Lies dir nochmal das Kapitel in SELFHTML zu verschachtelten Elementen durch.

.userName:hover .userNameMenu { display:block; } bedeutet: ein Element mit der Klasse "userNameMenu", dass in einem Element mit Klasse "userName", auf dem die Maus drauf ist, wird angezeigt. (Soweit ich das verstanden habe, meinst du, sobald _irgendein_ .userName gehovert wird, werden _alle_ .userNameMenu angezeigt)

Ach ja, neues Problem: Der IE zeigt den Inhalt des <a>-Tags (und wohl der ganzen userName-Klasse) nicht an, wenn der Text nicht in einem Container mit position: relative ist. Warum? Ich werd noch wahnsinnig mit diesem Browser ...

Der IE versteht position:fixed (oder war es position:static, ich verwechsel das immer...) nicht, IIRC zeigt er den Inhalt aber trotzdem an.

Viele Grüße aus Freiburg,
Marian

[Anton K.]

Danke nochmal!

Dein Hinweis bezüglich der Verschachtelung war sinnvoll, habe ich vollkommen vergessen. :)

Unabhängig davon hab ich das Problem jetzt auch irgendwie browserübergreifend gemacht. ;) Vielleicht es einfach nur spät ... wo ist mein Denkfehler bei diesem Ding hier:

http://otaku-germany.eu/problem.html

Warum wird der Text, der kein Link ist, überdeckt, der Rest aber nicht?

[Anton Katzer]

Nachtrag:

http://otaku-germany.eu/problem2.html

Aus irgendwelchen Gründen geht es, wenn man den Link nicht im position:relative formatierten <div> hat. Ich hab jetzt ein Dummy-<div> mit position:relative, in dem das Menü zu finden ist.

Interessanterweise hat der der IE eine etwas andere Vorstellung von "top: 20px" als andere Broswer. Lösungsvorschläge?

[Marian]

Hallo Anton,

Verwende doch bitte mal meine Methode (mit :hover), dann geht das Menü auch wieder weg.

Aus irgendwelchen Gründen geht es, wenn man den Link nicht im position:relative formatierten <div> hat. Ich hab jetzt ein Dummy-<div> mit position:relative, in dem das Menü zu finden ist.

Interessanterweise hat der der IE eine etwas andere Vorstellung von "top: 20px" als andere Broswer. Lösungsvorschläge?

Vielleicht margin?

Viele Grüße aus Freiburg,
Marian

[Gernot Back]

Hallo Anton,

Mach ich irgendwas falsch?

Nein, wahrscheinlich will der IE nur schlauer sein als die Webseitenersteller, nach dem Motto "Links überdecken? - das kann der/die doch nicht wollen".

Versuch es mal mit einem dem Abdecklayer zugewiesenen transparenten Hintergrundbild!

Gruß Gernot