Text per CSS/Hover anzeigen klappt nicht im IE

[Florian]

Ich habe ein Menü und möchte, dass beim Darüberfahren mit der Maus an anderer Stelle ein Erklärungstext angezeigt wird. So wie man es bei http://www.meyerweb.com/eric/css/edge/popups/demo.html sieht.

Im Fx klappt das auch problemlos, nur mit dem IE nicht. Jetzt würde ich sagen, der IE kanns halt nicht. Aber obiges Beispiel zeigt er problemlos an, nur meine Implementierung nicht.

Das Menü sieht so aus:

<div id="menu">
<a href="about.html">About<span>All about the company</span></a>
<a href="products.html">Products<span>All about the company</span></a>
<a href="contact.html">Contact<span>All about the company</span></a>
<a href="order.html">Order<span>All about the company</span></a>
</div>

Das zugehörige CSS so:

div#menu a {
 display:block;
 background-color:blue;
 color:white;
 font-size:110%;
 margin-bottom:1px;}

div#menu a:hover {
 background-color:grey;
 text-decoration:none;}

div#menu a span {
 display:none;}

div#menu a:hover span {
 display:block;
 position:absolute;
 left:0%;
 top:200%;
 color:black;}

Kann mir jemand sagen, was dem IE daran nicht schmeckt? Da ich absolut keinen Unterschied zu dem Beispiel von Eric Meyer entdecken konnte, verzweifel ich hier langsam...

[wahsaga]

hi,

Kann mir jemand sagen, was dem IE daran nicht schmeckt?

Der IE vergisst einfach, das im a liegende Element (bei dir ein span) neu zu rendern, wenn bei a:hover nicht auch für a selber eine signifikante Änderung auftritt.

Ob die Änderung der Hintergrundfarbe dazu ausreicht, weiß ich nicht.

Probiere mal testweise, dem a bei :hover noch einen Rahmen zu verpassen, oder - was im IE bekanntlich auch viele Probleme lösen kann - eine geringe Höhe, bspw. height:1%.

gruß,
wahsaga

[Florian]

Danke, mit einem Rahmen klappts. Ich kann nicht sagen, wie sehr mich der IE ankotzt. Weil die CSS-Implementierung dort derart vermurkst ist, muss man stundenlang basteln bis er es endlich kapiert. Aber dann darf man die Seite wahrscheinlich "IE-optimiert" nennen.

Ich hoffe dass sich das mit dem 7er endlich ändert, angeblich sollen da ja einige Klagen erhört worden sein.

Ein /&"%§%-Browser ist das. Okay, genug Frust abgelassen... :)

[Axel Richter]

Hallo,

div#menu a {
display:block;
background-color:blue;
color:white;
font-size:110%;
margin-bottom:1px;}

div#menu a:hover {
background-color:grey;

^gray(IE) vs. grey(Gecko)
                      Benutze einen RGB-Farbcode.

text-decoration:none;}

div#menu a span {
display:none;}

div#menu a:hover span {
display:block;
position:absolute;
left:0%;
top:200%;

^Das SPAN soll also 200% der Höhe des Viewports bzw. des umgebenden Elements mit display!=static von oben in diesem positioniert werden? Das ist es auch im IE.

color:black;}

viele Grüße

Axel

[Axel Richter]

Hallo,

background-color:grey;
                     ^gray(IE) vs. grey(Gecko)
                      Benutze einen RGB-Farbcode.

Oder nimm gray. Das ist für beide verständlich, wobei diesmal der IE sogar im Recht zu sein scheint ;-). Natürlich nur mit dem Farbnamen, nicht damit, dass er eine Änderung der Hintergrundfarbe bei a:hover als Trigger für a:hover span braucht.

viele Grüße

Axel

[Der Martin]

Hi,

Oder nimm gray. Das ist für beide verständlich...

ja, und in diesem Beispiel ist der Farbbezeichner auch relativ klar verständlich. Aber sehr viele dieser Bezeichner sind derart phantasievoll gewählt, dass man sich überhaupt nichts darunter vorstellen kann. Deswegen empfehle ich allgemein, lieber Klartext, also RGB-Angaben, zu benutzen. Dann hat man beim Lesen des Codes wenigstens eine ungefähre Vorstellung, was für eine Farbe da gemeint ist. Beispiel: Unter "teal" kann ich mir nichts vorstellen, aber wenn ich "#008080" lese, dann ist klar: ein dunkles Türkis.

So long,
 Martin

[Ashura]

Hallo Martin.

Deswegen empfehle ich allgemein, lieber Klartext, also RGB-Angaben, zu benutzen. Dann hat man beim Lesen des Codes wenigstens eine ungefähre Vorstellung, was für eine Farbe da gemeint ist. Beispiel: Unter "teal" kann ich mir nichts vorstellen, aber wenn ich "#008080" lese, dann ist klar: ein dunkles Türkis.

Das wiederum ist die hexadezimale Schreibweise.

Die RGB-Notation sähe für „teal“ so aus: rgb(0, 128, 128).

Einen schönen Samstag noch.

Gruß, Ashura

[Der Martin]

Hallo Ashura,

[...] "#008080" lese, dann ist klar: ein dunkles Türkis.
Das wiederum ist die hexadezimale Schreibweise.

ja, aber auch die setzt sich ja aus den RGB-Komponenten R=00, G=80, B=80 zusammen.

Die RGB-Notation sähe für „teal“ so aus: rgb(0, 128, 128).

Das ist für mich dasselbe im Hinblick auf Eindeutigkeit und Lesbarkeit - wobei ich persönlich die hexadezimale Notation noch vorziehen würde, da ich Hex-Zahlen anschaulicher und "griffiger" finde, wenn es um Byte-Werte geht.

Schönen Sonntag schon,
 Martin

[Gunnar Bittersmann]

Unter "teal" kann ich mir nichts vorstellen,

Martin, ein der englischen Sprache Kundiger wird das anders sehen.

aber wenn ich "#008080" lese, dann ist klar: ein dunkles Türkis.

Einer, der’s mit Zahlen nicht so hat – besonders in hexadezimaler Darstellung – und die additive Farbmischung im Kopf nicht so beherrscht, wird das anders sehen.

Live long and prosper,
Gunnar