CSS-Hover-Effekt nicht zuverlässig unter Safari

W

walfreiheit

Aktives Mitglied
Thread Starter
Dabei seit
06.06.2004
Beiträge
36.642
Reaktionspunkte
15.978
Hallo,

ich habe eine kleine Internetseite erstellt. Diese besitzt ein Menü, welches aus Bildern besteht. Diese werden mit CSS beim Überfahren mit der Maus gegen andere Bilder ausgewechselt (was optisch daran resultiert, dass die Schrift unterstrichen wird). Dies funktioniert wunderbar und ist sogar XHTML Strict valide (oberstes Ziel).

Es funktioniert auch plattform- und browser übergreifend. Leider aber genau in Safari funktioniert es nur unzuverlässig. Meist verschwindet eines der drei Bilder / Menüpunkte beim darüber Fahren ganz und wird nicht ausgetauscht. In anderen Browsern funktioniert es wie es soll.

Weiß jemand warum das so ist und wie man das (XHTML Strict valide!) abstellen kann?

Die Adresse der Seite zum ausprobieren lautet.

Dies ist keine "Review"-Anfrage, also bitte nur sachdienliche Kommentare! Danke!

Dank & Gruß,
Maulwurfn
 
ich kann den Fehler hier nicht nachvollziehen (Safari 5 mit tagesaktuellem Webkit). Hattest Du die Caches deaktiviert? Nicht das da ein Cache-Effekt Dir einen Streich gespielt hat!?
 
Das funktioniert hier auch mit Firefox/Win nicht. Lediglich der Link wird unterstrichen.
 
wegus schrieb:
ich kann den Fehler hier nicht nachvollziehen (Safari 5 mit tagesaktuellem Webkit). Hattest Du die Caches deaktiviert? Nicht das da ein Cache-Effekt Dir einen Streich gespielt hat!?
Zum Vergrößern anklicken....
Mac OS X 10.6.4
Safari 5.0.1 (6533.17.8)

Cache ist nicht deaktiviert.

admartinator schrieb:
Das funktioniert hier auch mit Firefox/Win nicht. Lediglich der Link wird unterstrichen.
Zum Vergrößern anklicken....
Mehr passiert optisch auch nicht. De facto wird ein Bild mit Text gegen ein Bild mit unterstrichenem Text ausgetauscht.
Firefox unter Windows XP in WMware tut hier wie es soll, ebenso der sonst so zickige Internet Explorer.
 
Bei mir dauert es einen Moment bis das hover-Bild nachgeladen wird. Wenn es mal im Cache ist, funktioniert alles einwandfrei,
Abgesehen davon würde ich die Menüs mit Text bauen, wegen SEO und so...
 
flosse schrieb:
Bei mir dauert es einen Moment bis das hover-Bild nachgeladen wird.
Zum Vergrößern anklicken....
Soweit normal, wird ja erst beim darüber Fahren geladen.
flosse schrieb:
Wenn es mal im Cache ist, funktioniert alles einwandfrei,
Zum Vergrößern anklicken....
Bei mir leider irgendwie nicht
flosse schrieb:
Abgesehen davon würde ich die Menüs mit Text bauen, wegen SEO und so...
Zum Vergrößern anklicken....
SEO ist für dieses Projekt nicht von Bedeutung. Grundsätzlich stimmt deine Aussage natürlich.
 
Zunächst auch von mir der Hinweis, dass ich den Fehler nicht nachvollziehen kann, die Grafiken werden sauber ausgetauscht.

Ich muss mich allerdings fragen, warum hier überhaupt Bilder notwendig sind? Die Schriftart sieht nicht so spektakulär aus, dass es nicht auf eine Geneva oder Helvetica/Arial tun würde. Oder ist das Kundenvorgabe?

Zwei Anmerkungen:

1. Dafür, dass du so sehr auf Validität achtest, geht bei dir Zugänglichkeit leider ziemlich unter: Wieso nutzt du leere Links? Das ist nicht die feine Art, vor allem weil das mithilfe von CSS sehr gut lösbar ist:

Code: 
<a href="index.php" class="menu1" onfocus="this.blur()">upcoming event</a>

CSS erweitern:
Code: 
a.menu1 {
     text-indent: -9999em;
     overflow: hidden;
}

Im normalen Browser bekommt man davon nichts mit, Screenreader, Suchmaschinen-Robots, etc. können den Text aber trotzdem lesen.


2. Wenn du schon Hintergrundbilder für die Navigation nutzt, warum dann für jeden einzelnen Navigationspunkt zwei Bilder? Am besten alle in eine große Grafik (Stichwort Sprites) und dann mittels background-position für die unterschiedlichen Punkte und die jeweiligen Hover-Stati verschieben.
 
SEO vielleicht nicht, aber "zuverlässig" sollte die Seite ja sein - sonst hättest du den Thread nicht gestartet. Insofern: mach's mit CSS und gut ist! ;)

:hehehe:
 
scope schrieb:
Zunächst auch von mir der Hinweis, dass ich den Fehler nicht nachvollziehen kann, die Grafiken werden sauber ausgetauscht.
Zum Vergrößern anklicken....
Scheint also an meinem Rechner zu liegen. Ich werde wohl mal Safari zurück setzen.

scope schrieb:
Ich muss mich allerdings fragen, warum hier überhaupt Bilder notwendig sind? Die Schriftart sieht nicht so spektakulär aus, dass es nicht auf eine Geneva oder Helvetica/Arial tun würde. Oder ist das Kundenvorgabe?
Zum Vergrößern anklicken....
Das ist mein persönliches Projekt und mein Wunsch.

scope schrieb:
Zwei Anmerkungen:

1. Dafür, dass du so sehr auf Validität achtest, geht bei dir Zugänglichkeit leider ziemlich unter: Wieso nutzt du leere Links? Das ist nicht die feine Art, vor allem weil das mithilfe von CSS sehr gut lösbar ist:

Code: 
<a href="https://www.macuser.de/forum/forum.php" class="menu1" onfocus="this.blur()">upcoming event</a>

CSS erweitern:
Code: 
a.menu1 {
     text-indent: -9999em;
     overflow: hidden;
}

Im normalen Browser bekommt man davon nichts mit, Screenreader, Suchmaschinen-Robots, etc. können den Text aber trotzdem lesen.


2. Wenn du schon Hintergrundbilder für die Navigation nutzt, warum dann für jeden einzelnen Navigationspunkt zwei Bilder? Am besten alle in eine große Grafik (Stichwort Sprites) und dann mittels background-position für die unterschiedlichen Punkte und die jeweiligen Hover-Stati verschieben.
Zum Vergrößern anklicken....
Zu 1.) Ich werde es ändern, danke für den Tipp.

Zu 2.) Ich bin ein Laie und betreibe dies ausschließlich als Freizeitvertreib. Von dieser Möglichkeit habe ich daher noch nie etwas gehört. Ich werde mich dort einmal einlesen. Danke auch hierfür!
 
admartinator schrieb:
SEO vielleicht nicht, aber "zuverlässig" sollte die Seite ja sein - sonst hättest du den Thread nicht gestartet. Insofern: mach's mit CSS und gut ist! ;)

:hehehe:
Zum Vergrößern anklicken....

Sie ist ja zuverlässig. Nur nicht bei mir. Damit kann ich im Zweifel leben. :D
 
Maulwurfn schrieb:
Das ist mein persönliches Projekt und mein Wunsch.
Zum Vergrößern anklicken....

Ok, dann ist das natürlich deine Sache. Aber schau dir mal Projekte wie Cufon oder noch besser Typekit an. Die bieten die Möglichkeit, andere Schriftarten auf Webseiten zu nutzen, ohne sie als Grafiken einbinden zu müssen. Ich habe vor einiger Zeit zunächst Cufon probiert und das klappt relativ gut, leider ist der Text nur noch mangelhaft markierbar, weil die Buchstaben über Javascript gerendert werden. Typekit geht einen Schritt weiter und liefert echte Schriftarten an den Browser aus, so dass man als Endbenutzer nichts davon mitbekommt. Ich habe es bei einem Projekt in der kostenlosen Fassung genutzt und bin sehr glücklich damit. Es erweitert die Möglichkeiten, andere Schriften zu nutzen, deutlich.
 
scope schrieb:
Ok, dann ist das natürlich deine Sache. Aber schau dir mal Projekte wie Cufon oder noch besser Typekit an. Die bieten die Möglichkeit, andere Schriftarten auf Webseiten zu nutzen, ohne sie als Grafiken einbinden zu müssen. Ich habe vor einiger Zeit zunächst Cufon probiert und das klappt relativ gut, leider ist der Text nur noch mangelhaft markierbar, weil die Buchstaben über Javascript gerendert werden. Typekit geht einen Schritt weiter und liefert echte Schriftarten an den Browser aus, so dass man als Endbenutzer nichts davon mitbekommt. Ich habe es bei einem Projekt in der kostenlosen Fassung genutzt und bin sehr glücklich damit. Es erweitert die Möglichkeiten, andere Schriften zu nutzen, deutlich.
Zum Vergrößern anklicken....

flosse schrieb:
Dafür gibt es z.B. die Google Font API
Zum Vergrößern anklicken....

Danke für eure Hinweise! Ich wusste nicht, was mittlerweile alles geht! Dann werde ich es damit probieren!

Dennoch, nur noch einmal zur Verdeutlichung, habe ich ein Video gemacht:
 
Zuletzt bearbeitet von einem Moderator:
ich hatte das schon so verstanden wie Du es geschildert hast. Genau so etwas wie im Video habe ich versucht zu provozieren, ist mir hier aber nicht gelungen.
 
wegus schrieb:
ich hatte das schon so verstanden wie Du es geschildert hast. Genau so etwas wie im Video habe ich versucht zu provozieren, ist mir hier aber nicht gelungen.
Zum Vergrößern anklicken....
Gut, dann scheint ja ja zu funktionieren. Unterdessen probiere ich dann die anderen, für mich neuen, Wege zu nehmen!

Danke an alle, hat sich damit erledigt!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten