✔ DIVs (Fehler im IE, Bildschirmauflösung + Popups)

Status
Nicht offen für weitere Antworten.
So funktioniert's bei mir im IE:

Code: 
a.img:hover span.freunde {position:absolute;top:0pt;left:50%;margin-left:-300pt;background-color:white; border: 2pt outset gray; height:100pt;width:100pt;z-index:4, text-decoration:none; font-family:arial narrow 12px; color:black;}

Das span-Element gehört dennoch erst nach dem img-Element notiert.
 
Allerdings verzerren sich die Bilder um einen Pixel beim hover...aber da habe ich sicher nur irgend etwas übersehen -.-

Ich denke jetzt sind alle Fehler ausgemerzt, vielen Dank. Würde den Threat aber gerne trotzdem offen lassen - falls mir doch noch was einfällt ;)

Falls Dich das Endergebnis interessiert sag bescheid, dann poste ich einen Link oder so.
 
Hi,

die Verschiebung der Bilder beim "Hovern" (nach oben) ergibt sich dadurch, dass für das umschliessende DIV ein umlaufender Innenabstand von "1pt" definiert ist, das "Popup" aber eine obere Position von "0pt" besitzt.
 
Im "padding"... Tatsache...und da, anders als FF und Co, der IE Abstände/Border hinzu rechnet statt sie von den angegeben Maßen abzuziehen, fällt das ausnahmsweise auch nur im FF auf. Siehst Du. Ich wusste doch ich hätte einfach nur etwas übersehen ;-) Danke
 
Und es will nicht enden ^^

Ich habe jetzt, im Anschluss an den schon durchgekauten Code, folgende Erweiterungen vorgenommen...

---CSS---
div.all {position:absolute; left:50%;width:90pt; height: 12pt; background-color:none; text-align:center;border:none; padding:2pt; font: 12px arial narrow black;}

div.about {left:50%; margin-left:-512pt; top:233pt;}
div.about:hover span {margin-left:-47pt;}
div.mirror {left:50%; margin-left:-412pt; top:233pt;}
div.mirror:hover span {margin-left:-147pt;}
div.work {left:50%; margin-left:-312pt; top:233pt;}
div.work:hover span {margin-left:-247pt;}
div.likes {left:50%; margin-left:-212pt; top:233pt;}
div.likes:hover span {margin-left:-347pt;}
div.dislikes {left:50%; margin-left:-112pt; top:233pt;}
div.dislikes:hover span {margin-left:-447pt;}


div.all:hover span {display:block;position:absolute; left:50%; top:-233pt; width:250pt; height:200pt; background-color:white; border:1pt outset grey; text-align:left;border:none; opacity:0.8;}
div.all span {display:none;}

---HTML---

<div class="about all">THATs ME<span class="about">short text about my person coming soon...</span></div>

etc...

Der Spass funktioniert im FF einwandfrei, natürlich aber wieder nicht im IE (die divs werden nicht einmal angezeigt). Seltsamerweise spielt Opera nun aber auch nicht mehr mit. Da der Code inzwischen recht lang und suppig wird verliere ich den Überblick, trotz aller Logik...Fehlerquelle unbekannt (wahrscheinlich für Dich eine Kleinigkeit)...danke schon mal.

MfG
 
Hi,

wie ich dich in diesem Thread schon mal darauf hingewiesen hatte (siehe Beitrag #6), unterstützt neben den modernen Browsern lediglich der aktuelle IE7 die allgemeine Pseudoklasse div:hover, und die älteren IE-Versionen eben nicht, denn sie "kennen" nur a:hover.

Im Opera (9.23) funktioniert bei mir das CSS-Popup einwandfrei.

Die Positionsangaben sind aber unglücklich gewählt, da von "THATs ME" bei einer Auflösung von 1280*1024px und maximiertem Fenster nur "ATs ME" am linken Fensterrand zu lesen ist.

Gleiches gilt für den Popup-Text "short text about my person coming soon...", der zum Teil in den nicht-sichtbaren Bereich des Browserfensters verschwindet.

Bei kleineren Monitorauflösungen bzw. nicht-maximiertem Browserfenster ist somit von dem Element noch weniger bis gar nichts zu sehen.
 
Oh...Verzeihung...da habe ich dann wohl etwas voreilig reagiert, was die Pseudoklassen angeht.

Gut. Allerdings - bei mir habe ich keinerlei Schwierigkeiten in unterschiedlichen Auflösungen, auch nicht auf unterschiedlichen Rechnern und Betriebssystemen. Da sitzt alles wo es sitzen soll *confused*.
Jedoch...die gleiche Version von Opera springt bei mir überhaupt nicht auf die Popups an. Zwar wird der Text im div angezeigt, aber weder der :hover noch der span reagieren. Einzig im FF läuft alles wie es soll.
Jetzt vermute ich dass das Übel in der ganzen Suppe zu suchen ist, wahrscheinlich in der chronologischen Auflistung der einzelnen Befehle. Zu meinem Leidtragen ist mir das aber noch etwas zu hoch (beschäftige mich ja erst einige Tage mit CSS). Ich schätze es gibt auch keine Möglichkeit den Code automatisch zu validieren, wie bei HTML, oder!?

-.-
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück