Seltsamer Fehler mit Opera bei grafischen Links

[Markus Pitha]

Moin,
Ich habe diverse grafische Links, die sich mit einem Hovereffekt ändern, was auch so weit funktioniert. Allerdings macht mir, wie so oft, Opera, in meinem Fall 8.0 (Linux), einen Strich durch die Rechnung. Opera stellt nämlich bei allen Links, wobei ich im Vorzeigebeispiel die Links auf einen beschränkt habe, einen seltsamen schwarzen Punkt unterhalb der Links dar. Ich habe zur besseren Ansicht den Hintergrund von <a> mit einer gelben Farbe belegt, um vielleicht eher den Fehler zu finden, aber alle meine Versuche scheiterten. Der Punkt befindet sich im gelben Bereich im rechten unteren Eck. Wie man durch die Farbbelegung auch erkennen kann, macht Opera den Links breiter als Mozilla, und genau in diesem zusätzlichen Bereich befindet sich dieser lästige schwarze Punkt.
Dazu möchte ich anmerken, dass dieser Punkt nur durch <a> entsteht. Befindet sich hier kein Link, sondern due Grafik alleine, sieht man diesen Punkt nicht. Was kann ich tun?
Hier das Testbeispiel: http://test.pithax.net/testseite/

Markus.

[MudGuard]

Hi,

Dazu möchte ich anmerken, dass dieser Punkt nur durch <a> entsteht. Befindet sich hier kein Link, sondern due Grafik alleine, sieht man diesen Punkt nicht. Was kann ich tun?

Laß mal den Whitespace im Link weg: <a ...><img ...></a>

cu,
Andreas

[Markus Pitha]

Hallo,

Laß mal den Whitespace im Link weg: <a ...><img ...></a>

Du hast Recht. Die Zeilenumbrüche waren schuld ;)
Hmmm, und ich dachte immer die Formatierung innerhalb des Quellcodes hätte keine Auswirkung auf das Aussehen im Browser selbst.

Markus.

[Markus Pitha]

Eines habe ich vergessen...
Es ist zwar nicht direkt ein großes Problem, aber in (meinem) Mozilla (X11; U; Linux i686; de-AT; rv:1.7.6) ist es so, dass bei Überfahren der Links mit dem Mauszeiger plötzlich ein Ladebalken ensteht, dass mich schon etwas stört.
Wodurch könnte dieser Balken verursacht werden?

Markus.

[MudGuard]

Hi,

Es ist zwar nicht direkt ein großes Problem, aber in (meinem) Mozilla (X11; U; Linux i686; de-AT; rv:1.7.6) ist es so, dass bei Überfahren der Links mit dem Mauszeiger plötzlich ein Ladebalken ensteht, dass mich schon etwas stört.

Nachvollziehbar mit Mozilla 1.7.11 auf Win2K.

Im Firefox 1.0.6 auf Win2K ist das nicht so.

cu,
Andreas

[Ingo Turski]

Hi,

Wodurch könnte dieser Balken verursacht werden?

Das kann ich Dir zwar auch nicht beantworten - aber warum realisierst Du den hover-Effekt nicht mit CSS?

freundliche Grüße
Ingo

[Markus Pitha]

Hallo,

Das kann ich Dir zwar auch nicht beantworten - aber warum realisierst Du den hover-Effekt nicht mit CSS?

Das versuchte ich in der Vergangenheit mal. Zum einen will ich Grafiken verwenden, da Schriften hier zu kantig wären (mir gefällt ein gerenderter Look einfach besser), aber andererseits hatte genau ein Browser Problem damit, die Grafiken zu wechseln. Nämlich der IE, was fast nicht verwunderlich ist.
Wenn ich ehrlich sein soll ist es mir auch bereits zu mühsam geworden, ständig Stunden zu investieren, nur damit dieser Browser es so darstellt, wie jeder andere Browser auch (falls das überhaupt möglich ist).

Markus.

[Mel]

Hallo Markus,

Das versuchte ich in der Vergangenheit mal. Zum einen will ich Grafiken verwenden, da Schriften hier zu kantig wären (mir gefällt ein gerenderter Look einfach besser), aber andererseits hatte genau ein Browser Problem damit, die Grafiken zu wechseln. Nämlich der IE, was fast nicht verwunderlich ist.

lass mich raten, der IE hat die Grafiken verzögert nachgeladen bzw. so unzuverlässig dass man den hover-Effekt nicht nutzen konnte?

falls ja dann hätte ich tipp für Dich. Denn genau dieses Problem hat mich zuerst auch wieder auf JS zurückgreifen lassen. Es gibt jedoch die Möglichkeit eine einzige Grafik zu erstellen welche den normalen als auch hover-Zustand darstellt. Bei a:hover gibts Du dann in Deiner css einfach an dass sich die background-position _verschieben_ soll. Das funktioniert wunderbar, ohne Nachladen. Auch im IE ;)

[Markus Pitha]

Hallo,
danke für den Tipp. Das werde ich mir merken. In meinem Beispiel will ich es aber trotzdem bei Javascript belassen. Da ich Windows nicht verwende(n will), und folgedessen auch nicht in den Genuss eines IE komme, ist es etwas umständlich für den IE zu testen, da ich, obwohl es wahrscheinlich bei Mozilla funktioniert, leider nicht sicher sein kann, dass es auch im IE funktionieren würde.

Markus.

[Ingo Turski]

Hi,

da ich, obwohl es wahrscheinlich bei Mozilla funktioniert, leider nicht sicher sein kann, dass es auch im IE funktionieren würde.

und wie willst Du Dir sicher sein, daß das mit Javascript im IE funktioniert? Tut es nämlich in meinem IE schonmal nicht, da ich mich - wenn ich den mal verwende - an die bei vielen Bugmeldungem oft angegebene Empfehlung von Microsoft halte und Javascript deakiviert habe.

freundliche Grüße
Ingo

[Markus Pitha]

Hallo,

und wie willst Du Dir sicher sein, daß das mit Javascript im IE funktioniert? Tut es nämlich in meinem IE schonmal nicht, da ich mich - wenn ich den mal verwende - an die bei vielen Bugmeldungem oft angegebene Empfehlung von Microsoft halte und Javascript deakiviert habe.

Muss es auch nicht. Das Klicken des Links wird dadurch nicht beeinträchtigt.

Markus.

[Ingo Turski]

Hi,

Muss es auch nicht. Das Klicken des Links wird dadurch nicht beeinträchtigt.

Schon klar. Aber wieso erwähnst Du das in diesem Zusammenhang, wo es Dir doch um die Unterstützung im IE geht? Auch ein solches Gimmick sollte wenn möglich ohne Javascript funktionieren. Ganz abgesehen von dem zusätzlichen und eigentlich überflüssigen Quellcode im HTML und ggfls. der Warnung zu den aktiven Inhalten.

freundliche Grüße
Ingo

[Markus Pitha]

Hi,

Schon klar. Aber wieso erwähnst Du das in diesem Zusammenhang, wo es Dir doch um die Unterstützung im IE geht?

Ich glaube kaum, dass es sehr viele Benutzer wie dich geben wird, die JS im IE abschalten. Ich könnte nun einerseits mit CSS herumbasteln, und versuchen es so hinzukriegen, dass den hover-Effekt wirklich alle IE User sehen. Es könnte aber auch sein, dass es bei allen IE-Nutzern folgedessen irgendwie beeinträchtigt oder buggy ist und ich sagte bereits, dass ich nicht extra für den IE herumbasteln will. Daher gehe ich lieber auf Nummer sicher, und belasse es bei JS. Dass diverse User JS abschalten, ist wohl deren Sache. Ich sehe auch nicht wirklich ein, dass ich für den "Verschönerungseffekt" extra ein CSS-hover erstellen soll, nur weil ein Promilleanteil der User meint, sie müssten JS deaktivieren. Wenn sie das tun, haben sie eben keinen hightlight-Effekt, aber Einschränkungen müssen diejenigen dann eben in Kauf nehmen, wenn sie die Hälfte ihres Browsers abschalten.

P.S In für funktionierende Webseiten notwendigen Bereichen würde ich ohnehin kein JS einsetzen, oder eine andere Technologie, die irgendwie optional ist.

Markus.

[Ingo Turski]

Hi,

Ich glaube kaum, dass es sehr viele Benutzer wie dich geben wird, die JS im IE abschalten.

Da sprechen meine Logs eine andere Sprache. Die Browser fast aller Besucher meiner Seiten, die Javascript nicht unterstützen, geben sich als MSIE aus - warum wohl? ;-)
Insgesamt sind es natürlich nur 1-3%, aber warum diesen etwas vorenthalten, wenn es absolut nicht nötig ist.

Daher gehe ich lieber auf Nummer sicher, und belasse es bei JS.

JS und "Nummer sicher"? Ist doch ein Widerspruch. Und was kann bei einer CSS-Lösung wie meiner, die das img ausblendet, anderes passieren, als daß dies eben nicht passiert?

nur weil ein Promilleanteil der User meint, sie müssten JS deaktivieren.

Ein Prozentanteil bitte.

wenn sie die Hälfte ihres Browsers abschalten.

Lediglich den unsicheren Teil, was auf sinnvollen Seiten überhaupt keine negativen Auswirkungen hat.

freundliche Grüße
Ingo

[Markus Pitha]

Hi,

Ich glaube kaum, dass es sehr viele Benutzer wie dich geben wird, die JS im IE abschalten.
Da sprechen meine Logs eine andere Sprache. Die Browser fast aller Besucher meiner Seiten, die Javascript nicht unterstützen, geben sich als MSIE aus - warum wohl? ;-)

Auf deiner Seite surft aber wahrscheinlich nicht der Otto-Normal-Surfer, da das Thema deiner Seite professionelles, fortgeschrittenes Webdesign ist.

Und was kann bei einer CSS-Lösung wie meiner, die das img ausblendet, anderes passieren, als daß dies eben nicht passiert?

Nichts, nur müsste ich jetzt alle meine Datei hochladen, da Windows nicht fähig ist, von meiner Linux Partition zu lesen, dann mit dem IE herumfrickeln, und sogar ein Windows benutzen, das keinen aktuellen Virenschutz hat. (damals abgelaufen). Es ist mir also zu viel Abenteuer, wie du sicher verstehst.

nur weil ein Promilleanteil der User meint, sie müssten JS deaktivieren.
Ein Prozentanteil bitte.

Wie auch immer.

wenn sie die Hälfte ihres Browsers abschalten.
Lediglich den unsicheren Teil, was auf sinnvollen Seiten überhaupt keine negativen Auswirkungen hat.

Richtig. Deswegen sagte ich auch, dass ich kein JS dort einsetzen würde, wo die Funktionalität der Webseite darunter leiden würde.

Markus.

[Ingo Turski]

Hi,

Auf deiner Seite surft aber wahrscheinlich nicht der Otto-Normal-Surfer, da das Thema deiner Seite professionelles, fortgeschrittenes Webdesign ist.

Nein. Der weitaus überwiegende Teil meiner Besucher kommt über Google und interessiert sich nur für Tanzschritte. ;-)

freundliche Grüße
Ingo

[Detlef G.]

Hallo Markus

... Da ich Windows nicht verwende(n will), und folgedessen auch nicht in den Genuss eines IE komme, ist es etwas umständlich für den IE zu testen, ...

Wie testest du dann, ob der Rest deiner Seite im IE vernünftig angezeigt wird?

Auf Wiederlesen
Detlef

[Markus Pitha]

Hi,

Wie testest du dann, ob der Rest deiner Seite im IE vernünftig angezeigt wird?

Entweder gar nicht, da ich ohnehin nur SSI, HTML, und einfaches CSS verwende, oder ich müsste mich am Schluss dazu überwinden, mein Windows zu booten.
Aus Erfahrung weiß ich aber, dass der IE das was ich schreibe richtig anzeigen wird, da es einfachstes CSS ist.

Markus.

[Ingo Turski]

Hi,

Es gibt jedoch die Möglichkeit eine einzige Grafik zu erstellen welche den normalen als auch hover-Zustand darstellt. Bei a:hover gibts Du dann in Deiner css einfach an dass sich die background-position _verschieben_ soll.

Und es gibt noch eine Möglichkeit, die dieses Problem ebenfalls löst und das IMG (mit dem sinnvollen ALT-Attribut) nicht aus dem HTML verbannt: http://www.1ngo.de/web/bildwechsel.html.

freundliche Grüße
Ingo

[Mel]

Und es gibt noch eine Möglichkeit, die dieses Problem ebenfalls löst und das IMG (mit dem sinnvollen ALT-Attribut) nicht aus dem HTML verbannt: http://www.1ngo.de/web/bildwechsel.html.

Hey Klasse ;) Mensch Ingo, Du glaubst nicht wie sehr zumindest ich von Deiner Seite profitiere. Vielen Dank mal an dieser Stelle..!

[Ingo Turski]

Hi,

Hey Klasse ;) Mensch Ingo, Du glaubst nicht wie sehr zumindest ich von Deiner Seite profitiere. Vielen Dank mal an dieser Stelle..!

Bitte sehr. Die Idee dazu kam mir übrigens anläßlich eines Kommentars hier im Forum (müßte von Mudguard oder wahsaga gewesen sein;-), daß man über :hover ja nicht auf nur Hintergrundgrafiken Einfluß nehmen könne.

freundliche Grüße
Ingo

[Mel]

Und es gibt noch eine Möglichkeit, die dieses Problem ebenfalls löst und das IMG (mit dem sinnvollen ALT-Attribut) nicht aus dem HTML verbannt: http://www.1ngo.de/web/bildwechsel.html.

Ich muss mal schnell was dazu fragen. Wäre denn die Angabe eines title-Attributes im <a>-Tag ein adäquater Ersatz für ein fehlendes alt-Attribut? Sprich: lesen die Screenreader dieses vor?

[Ingo Turski]

Hi,

Ich muss mal schnell was dazu fragen. Wäre denn die Angabe eines title-Attributes im <a>-Tag ein adäquater Ersatz für ein fehlendes alt-Attribut? Sprich: lesen die Screenreader dieses vor?

Das würde mich auch interessieren. Allerdings vergißt Du noch etwas anderes dabei: Wer Grafiken (z.B. in einem PDA) deaktiviert hat, sieht ohne das ALT-Attribut im IMG rein gar nichts - auch nicht bei Nutzung der FIR-Methode! Daher sollte bei einer grafischen Navigation nicht auf das IMG verzichtet werden.

freundliche Grüße
Ingo

[Mel]

Ja Du hast recht, absolut. Wobei...man könnte ja auch ein extra-Style-Sheet für ein PDA-Gerät angeben. (handheld, richtig). Das macht eh oft Sinn...
hmm was ist denn eine FIR-Methode?

[Ashura]

Hallo Mel.

hmm was ist denn eine FIR-Methode?

[Wikipedia: Fahrner_Image_Replacement]

Einen schönen Samstag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Ja Du hast recht, absolut. Wobei...man könnte ja auch ein extra-Style-Sheet für ein PDA-Gerät angeben. (handheld, richtig). Das macht eh oft Sinn...

PDAs waren nur ein Beispiel. Eine solche Navigation ist in allen CSS-fähigen Browsern, die Grafiken deaktiviert haben, unbenutzbar.
Und ein Extra-CSS für Handhelds sollte sich bei einer ausreichend flexiblen Seite eigentlich erübrigen.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Laß mal den Whitespace im Link weg: <a ...><img ...></a>
Du hast Recht. Die Zeilenumbrüche waren schuld ;)
Hmmm, und ich dachte immer die Formatierung innerhalb des Quellcodes hätte keine Auswirkung auf das Aussehen im Browser selbst.

1 Linebreak nach dem Starttag muß ignoriert werden ebenso wie 1 Linebreak vor dem End-Tag.
Sonstiger Whitespace, egal welche Menge, wird zu einem Leerzeichen zusammengefaßt (außer bei white-space:pre)

Du hast nicht nur einen Line-Break, sondern auch noch Tabs für die Einrückung - und die dürfen nicht ignoriert werden.

cu,
Andreas