Opera-Bug bei :hover:after und position:absolute

[Malcolm Beck´s]

hi,

kann es sein, das Opera schwierigkeiten mit :hover:after mit position:absolute hat?

Folgenes CSS scheint Opera schwierigkeiten zu bereiten:

[class="extern"] {               /* Um Bugs in den IEs auszuschliessen */  
  position:relative !important;  
}  
[class="extern"]:hover:after {   /* Ohne Angaben für das aussehen der box */  
  position:absolute;  
  left:0;  
  bottom:1.5em;  
  z-index:5;  
}  
/*  
  da ich diese Eigenschaft für mehrere Elemente brauche, habe ich das ganze aufgeteilt  
*/  
[class="extern"]:hover:after {  
  content:"Externer Link";  
}

Im Firefox 3.5 habe ich keine Probleme mit diesem Beispiel, Seamonkey scheint das überhaupt nicht in den Griff zu kriegen, was aber auch Egal ist, aber Opera ist mir nicht egal.

Hier mal 2 Bilder, was passiert:

So soll es sein

Wenn man aber nur ein wenig auf der Seite runterscrollt passiert das:

So soll es nicht sein

Hier kann man sich das ganze Live ansehen. Weiss jemand, wie ich das doch noch schön kriege?
Das Original CSS, da es Online Minifiziert wird.

mfg

[Gunther]

Hi,

kann es sein, das Opera schwierigkeiten mit :hover:after mit position:absolute hat?

Im Firefox 3.5 habe ich keine Probleme mit diesem Beispiel, Seamonkey scheint das überhaupt nicht in den Griff zu kriegen, was aber auch Egal ist, aber Opera ist mir nicht egal.

hmmm ..., kann ich so nicht nachvollziehen. Weder mit 9.64, noch mit 10 beta - beide unter Windows.

Die Seiten sehen absolut identisch zur Darstellung im FF 3.5 aus.

Gruß Gunther

[Malcolm Beck´s]

hi,

hmmm ..., kann ich so nicht nachvollziehen. Weder mit 9.64, noch mit 10 beta - beide unter Windows.

Die Seiten sehen absolut identisch zur Darstellung im FF 3.5 aus.

Auch wenn du die Seiten Scrollst? Ich versteh das nicht, dass passiert mir schon zum 2ten mal, dass ich hier unter WinXp sp2 was anderes zu sehen bekomme, als andere Opera-Nutzer.

Das steht in "Über Opera"

Version         9.64
Build           10487
Plattform       Win32
Betriebssystem  Windows XP
XHTML+Sprache   Das Plug-in ist nicht geladen

Was hat denn die letzte Zeile zu bedeuten? Liegt es vielleicht daran? Bei mir besteht das Problem nach wie vor.

mfg

[Gunther]

Hi,

hmmm ..., kann ich so nicht nachvollziehen. Weder mit 9.64, noch mit 10 beta - beide unter Windows.

Die Seiten sehen absolut identisch zur Darstellung im FF 3.5 aus.

Auch wenn du die Seiten Scrollst?

wenn ich dein Problem richtig verstanden habe, dann wird bei dir die Seite im Opera bereits ein Stück abwärts gescrollt angezeigt, richtig? Und auch beim Scrollen verhält sie sich exakt so wie im FF.

Das steht in "Über Opera"

Version         9.64
Build           10487
Plattform       Win32
Betriebssystem  Windows XP
XHTML+Sprache   Das Plug-in ist nicht geladen

Was hat denn die letzte Zeile zu bedeuten? Liegt es vielleicht daran? Bei mir besteht das Problem nach wie vor.

Keine Ahnung, was die letzte Zeile da bedeutet, aber bei mir steht exakt dasselbe.

Hast du vlt. im Opera irgendein Benutzer-Stylesheet (oder Script), welches zusätzlich aktiv ist?

Gruß Gunther

[Malcolm Beck´s]

hi,

wenn ich dein Problem richtig verstanden habe, dann wird bei dir die Seite im Opera bereits ein Stück abwärts gescrollt angezeigt, richtig?

Nein, die Seite wird ganz normal angezeigt, also ohne scroll. Wenn ich selbst die Seite ein wenig runterscrolle, funktioniert das hover nicht mehr; mir ist aber aufgefallen, dass das hovern Generell nur funktioniert, wenn die Seite ganz oben steht, also nicht runter gescrollt wird, Bspw. hier wird beim hovern garnichts angezeigt.

Hast du vlt. im Opera irgendein Benutzer-Stylesheet (oder Script), welches zusätzlich aktiv ist?

Nein, garnichts, ich nutze Opera nur zum testen.
Ich sitze jetzt gerade vor meinem Notebook, auf dem herrscht Exakt das gleiche Problem, wie auf meinem anderen Rechner.

mfg

[Gunther]

Hi,

wenn ich dein Problem richtig verstanden habe, dann wird bei dir die Seite im Opera bereits ein Stück abwärts gescrollt angezeigt, richtig?

Nein, die Seite wird ganz normal angezeigt, also ohne scroll. Wenn ich selbst die Seite ein wenig runterscrolle, funktioniert das hover nicht mehr; mir ist aber aufgefallen, dass das hovern Generell nur funktioniert, wenn die Seite ganz oben steht, also nicht runter gescrollt wird, Bspw. hier wird beim hovern garnichts angezeigt.

ah jetzt habe ich das eigentliche Problem (welches existiert) kapiert. Sorry für die etwas lange Leitung.

Es ist aber nicht so, dass es im Opera nicht "nicht angezeigt" würde, aber es steht viel zu weit oben und somit ggf. außerhalb des Viewports, wenn man auf der Seite bereits ein Stück nach unten gescrollt hat. Und dann verschwindet es auch nicht wieder von alleine, wenn der hover-Status nicht mehr gegeben ist.

Getestet habe ich das jetzt auf der oben von dir verlinkten Seite an dem Link "jetzt nachholen".

Opera bezieht also das position:absolute auf ein anderes übergeordnetes Element, als der FF.

Gruß Gunther

[Malcolm Beck´s]

hi,

Es ist aber nicht so, dass es im Opera nicht "nicht angezeigt" würde, aber es steht viel zu weit oben und somit ggf. außerhalb des Viewports, wenn man auf der Seite bereits ein Stück nach unten gescrollt hat. Und dann verschwindet es auch nicht wieder von alleine, wenn der hover-Status nicht mehr gegeben ist.

Danke, du hast es auf den Punkt gebracht ;)
Ich tue mich manchmal schwer, bei einer Problembeschreibung auf den Punkt zu kommen.

Ich werde heute Abend -- habe leider keine brauchbare Testumgebung auf meinem Notebook, und mein richtiger Rechner steht im Laden -- mal ein Paar Tests machen, an was Opera hier scheitert.

Opera bezieht also das position:absolute auf ein anderes übergeordnetes Element, als der FF.

Ich werde heute Abend versuchen, dem auf den Grund zu gehen; an sich müsste Opera sich an dem a-Element orientieren, da ich diesem ja Explizit position:relative !important; zuweise.

Danke jedenfalls fürs Nachsehen.

mfg

[Harlequin]

Yerf!

Ich werde heute Abend versuchen, dem auf den Grund zu gehen; an sich müsste Opera sich an dem a-Element orientieren, da ich diesem ja Explizit position:relative !important; zuweise.

Evtl. nimmt Opera hier das :after zu wörtlich und ordnet den erzeugten Inhalt *nach* dem Link und nicht innerhalb an (müsste man mal in den Specs nachschauen, wie es sein soll).

Übrigens gibts im Firefox 3.0 ein Problem, wenn durch das Hovern der Link in die nächste Zeile rutscht...

Gruß,

Harlequin

[Malcolm Beck´s]

hi,

Evtl. nimmt Opera hier das :after zu wörtlich und ordnet den erzeugten Inhalt *nach* dem Link und nicht innerhalb an (müsste man mal in den Specs nachschauen, wie es sein soll).

Ich weise ja das position:relative; dem Element direkt zu, nicht erst beim hovern.

[class="extern"] {  
  position:relative !important;  
}

Vielleicht braucht Opera ein display:inline-block;, kann es aber erst heute Abend/Nacht wieder testen.

Übrigens gibts im Firefox 3.0 ein Problem, wenn durch das Hovern der Link in die nächste Zeile rutscht...

Eigentlich sollte beim hovern nichts auf die nächste Zeile rutschen -- könntest du das ein wenig genauer erläutern?

mfg

[Harlequin]

Yerf!

Evtl. nimmt Opera hier das :after zu wörtlich und ordnet den erzeugten Inhalt *nach* dem Link und nicht innerhalb an (müsste man mal in den Specs nachschauen, wie es sein soll).

Ich weise ja das position:relative; dem Element direkt zu, nicht erst beim hovern.

Ich meine nicht die Reihenfolge im CSS sondern den resultirenden DOM-Baum:

<a>Link:after</a>   oder   <a>Link</a>:after   ?

Übrigens gibts im Firefox 3.0 ein Problem, wenn durch das Hovern der Link in die nächste Zeile rutscht...

Eigentlich sollte beim hovern nichts auf die nächste Zeile rutschen -- könntest du das ein wenig genauer erläutern?

Es sieht so aus, als würde er das position:absolut ignorieren und den Inhalt einfach so mit in den Link schreiben, dadurch wird dieser breiter und wird durch das (nicht-)Umbrechen in die nächste Zeile geschoben. (evtl. das gleiche Verhalten wie bei dir im Seamonkey?)

Gruß,

Harlequin

[Malcolm Beck´s]

hi,

Ich meine nicht die Reihenfolge im CSS sondern den resultirenden DOM-Baum:

<a>Link:after</a>   oder   <a>Link</a>:after   ?

Da bin ich überfragt.

Es sieht so aus, als würde er das position:absolut ignorieren und den Inhalt einfach so mit in den Link schreiben, dadurch wird dieser breiter und wird durch das (nicht-)Umbrechen in die nächste Zeile geschoben. (evtl. das gleiche Verhalten wie bei dir im Seamonkey?)

Ja, das klingt nach dem verhalten von Seamonkey; Danke für den Hinweis, ich werde mir wohl nochmal den FF 3.0 installieren und das ganze in dem nochmal neu schreiben.

Vielleicht finde ich ja eine Browserübergreifende Lösung.

mfg

[Harlequin]

Yerf!

<a>Link:after</a>   oder   <a>Link</a>:after   ?

Da bin ich überfragt.

Aber ich denk mal, dass das der Unterschied zwischen FF und Opera ist.

Ja, das klingt nach dem verhalten von Seamonkey; Danke für den Hinweis, ich werde mir wohl nochmal den FF 3.0 installieren und das ganze in dem nochmal neu schreiben.

Der Seamonkey basiert ja auf dem FF, ist aber in der Version noch etwas hinterher. Da dürfte wohl demnächst auch eine Version kommen, die sich wie FF 3.5 verhält.

Gruß,

Harlequin

[Malcolm Beck´s]

hi,

also, ich habe eine halbgare Lösung für das Problem gefunden, es basiert im Grunde auf der Infobox von Ingo, allerdings halt ohne zusätzlich das HTML zu ändern oder anzupassen.

http://dj-tut.de/z_test/selfhtml/hover_content

Ich denke bzw. gehe stark davon aus, dass FF 2 weiterhin hiermit seine Probleme hat, da Seamonkey immer noch das gleiche verhalten aufweist wie vorher; ebenso Songbird 1.2.0, der auch auf die Mozilla-Engine(?) aufbaut.

Naja, so kommt mir das ganze jedenfalls nicht auf die Seite ;)

mfg

[Ulysses]

Hi!

http://dj-tut.de/z_test/selfhtml/hover_content

Ich denke bzw. gehe stark davon aus, dass FF 2 weiterhin hiermit seine Probleme hat,

Hab grad mit einem FF3.0 reingeschaut und damit das selbe Problem wie hier mit dem FF2

FG Ulysses

[Malcolm Beck´s]

hi,

Ich denke bzw. gehe stark davon aus, dass FF 2 weiterhin hiermit seine Probleme hat,
Hab grad mit einem FF3.0 reingeschaut und damit das selbe Problem wie hier mit dem FF2

Da haben einige Browser noch Probleme damit, <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=Content aus dem CSS> absolut zu positionieren.

Das sieht man auch Rechts bei den Diversen „Modulen“, denen ich mittels CSS eine Überschrift verpasse, diese lassen sich in vielen Browsern auch nicht absolut positionieren; Schade eigentlich, im FF 3.5 sieht es für meinen Geschmack sehr gut aus und mein HTML ist Frei von unnützem Zeugs.

Naja, mal schauen, was ich mache; frustrierend ist das ganze schon, ich saß ein Paar Tage an dem neuen Design.

mfg

[Ulysses]

Hi!

Naja, mal schauen, was ich mache; frustrierend ist das ganze schon, ich saß ein Paar Tage an dem neuen Design.

...das mir übrigens sehr gut gefällt!
FG Ulysses

[Malcolm Beck´s]

hi,

Naja, mal schauen, was ich mache; frustrierend ist das ganze schon, ich saß ein Paar Tage an dem neuen Design.
...das mir übrigens sehr gut gefällt!

Danke, das liest man gern ;)

mfg

[Gunther]

Hi!

Naja, mal schauen, was ich mache; frustrierend ist das ganze schon, ich saß ein Paar Tage an dem neuen Design.

Für mich wäre das ein Fall, wo ich mir überlegen würde, ob ich es nicht per JavaScript umsetze (aufgrund der CSS-Probleme in den verschiedensten Browsern).

Denn letztlich könnte man dieses Feature ja durchaus als "Mehrwert" für den Nutzer einstufen, und wer deine Seite ohne JS besucht - selber schuld.

Das Design als solches gefällt mir auch sehr gut!
<small>Wobei ich mir ja bei so einem Thema ein etwas "peppigeres" Design so im "Graffiti" Style vorgestellt hätte! ;-)</small>

Gruß Gunther

[Malcolm Beck´s]

hi,

Für mich wäre das ein Fall, wo ich mir überlegen würde, ob ich es nicht per JavaScript umsetze (aufgrund der CSS-Probleme in den verschiedensten Browsern).

Das ging mir auch schon durch den Kopf, wobei ich noch weitestgehend das meiste versuchen werde, mit CSS zu lösen; ein Paar dinge kann ich durchaus noch auf CSS schieben, für den rest werde ich dann auf Javascript zurückgreifen -- sofern ich es gebacken kriege.

Das Design als solches gefällt mir auch sehr gut!

Design-Technisch hinke ich dem Original noch hinter her.
Das dürfte ich aber Markup-Technisch wieder wett machen ;)

<small>Wobei ich mir ja bei so einem Thema ein etwas "peppigeres" Design so im "Graffiti" Style vorgestellt hätte! ;-)</small>

Das war auch mein Plan, aber dass ist wirklich sehr schwer, dass, was man sich vorstellt, auch so umzusetzen. Ich wollte sogar richtig "schmutziges" Streetstyle einsetzen, habe es aber nicht hin gekriegt.

Aber kein ding, dieses Design dürfte jetzt die Version 17 sein, und da werden noch viele Updates folgen, das nächste Design wird Definitiv schmutziger wie dieses ;)

mfg

[Ulysses]

Hi!

Übrigens gibts im Firefox 3.0 ein Problem, wenn durch das Hovern der Link in die nächste Zeile rutscht...

Eigentlich sollte beim hovern nichts auf die nächste Zeile rutschen -- könntest du das ein wenig genauer erläutern?

Ein ähnliches (oder vielleicht das selbe) Problem hab ich mit dem FF2.0:
Wenn ich das Browswerfenster verkleinere und mit der Maus auf FAQ fahre, beginnt der nachfolgende Text zu flimmern (springt zwischen den Zuständen hover und nicht-hover hin und her)

FG Ulysses

[Malcolm Beck´s]

hi,

Ein ähnliches (oder vielleicht das selbe) Problem hab ich mit dem FF2.0:
Wenn ich das Browswerfenster verkleinere und mit der Maus auf FAQ fahre, beginnt der nachfolgende Text zu flimmern (springt zwischen den Zuständen hover und nicht-hover hin und her)

Danke euch allen für die Hinweise; ich habe das ganze erstmal rausgenommen und werde es noch einmal überarbeiten, das macht keinen Sinn, eine Funktion einzubauen, die in 3 Browsern richtig funktioniert.

mfg

[Gunnar Bittersmann]

@@Malcolm Beck´s:

nuqneH

Ich hab im Opera das Problem, dass man nur zu „Bookmark bei …“ kommt, wenn man sich SEHR beeilt. Beim langsameren (normal schnellen) Mausschubsen geht wohl der Focus verloren, wenn man das Icon verlässt und „Bookmark bei …“ verschwindet, bevor man mit der Maus dort ankommt.

Qapla'

[Malcolm Beck´s]

hi Gunnar,

Ich hab im Opera das Problem, dass man nur zu „Bookmark bei …“ kommt, wenn man sich SEHR beeilt. Beim langsameren (normal schnellen) Mausschubsen geht wohl der Focus verloren, wenn man das Icon verlässt und „Bookmark bei …“ verschwindet, bevor man mit der Maus dort ankommt.

Du bist auf der falschen Baustelle ;)

Es geht um die Links, die im Content liegen, dass von dir geschilderte Problem weiss ich, da fehlt nur ein bisschen Höhe/Padding für den eingeblendeten Text, dass fixe ich heute Abend.

mfg