CSS .klasse { cursor:url('./../Ordner/datei.ani'); } im IE und EDGE

Webdesign & Technik HTML & CSS
1

Hallo,

ich habe ein sehr blödes Problem, und zwar findet Internet Explorer keine Datei die in CSS definiert ist mit url('./../zeiger.ani')! Sie wird gefunden, wenn die url angepasst wird: url('./zeiger.ani'). Dann findet aber EDGE, Firefox und Chrome die Datei nicht! Was mache ich falsch? Wo ist der Denkfehler?

Die Ordnerstruktur sieht wie folgt aus:
./HTML-Stite.html

Zusammenfassung 
...
<head>
...
<link rel="stylesheet" type="text/css" href="./Formatierung/Stil_1.css"/>
</head>
<body>
<div class="zeiger"> … </div>
…

./Formatierung/Stil_1.css

Zusammenfassung 
...
div.zeiger { cursor:url('./../Grafik/zeiger.ani'), url('./../Grafik/zeiger.gif'), auto;  animation:zeiger 800ms infinite; }
@keyframes zeiger
{
0%    { cursor:url('./../Grafik/zeiger1.png'), pointer; }
50%   { cursor:url('./../Grafik/zeiger2.png'), pointer; }
100%  { cursor:url('./../Grafik/zeiger3.png'), pointer; }
}

./Grafik/zeiger.ani
./Grafik/zeiger.gif
./Grafik/zeiger1.png
./Grafik/zeiger2.png
./Grafik/zeiger3.png

Ich habe dafür eine Lösung ABER es kann doch nicht wahr sein, dass ich für jeden Browser Dateipfade mit CSS Hacks einstellen muss!!!

div.zeiger { cursor:url(’./…/Grafik/zeiger.ani’), url(’./…/Grafik/zeiger.gif’), pointer; animation:zeiger 800ms infinite; }
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) /* NUR IE 10+ */
{ div.zeiger { cursor:url(’./Grafik/zeiger.ani’), url(’./Grafik/zeiger.gif’), pointer; } }

Das Verschieben der Grafiken in andere Ordner kommt nicht in Frage, da .htaccess unterschiedliche Zugriffsrechte ermöglicht die benötigt werden.

Ich bitte sehr um Hilfe!

2

Du hast da teils 3 Punkte drin - ansonsten achte darauf, dass die Pfade relativ zur CSS sind und nicht etwa relativ zur Seite. Das heißt da wo die CSS steht, auf diesen Pfad muss sich dann die .ani-Datei beziehen.

Ansonsten würde ich ./ am Anfang weglassen, auch wäre es ggf. relevant über welche Domain die html-Datei aufgerufen wird, falls Heimverzeichnisse noch eine Rolle spielen. Eine live-Demo ist da immer sehr hilfreich :slight_smile:

3

Danke Miro, gut beobachtet es sind drei Punkte geworden die aber dieses Forum aus zwei Punkten generierte. Es ist meine Unaufmerksamkeit bei der Textformatierung hier im Forum gewesen.

Ja, logisch.

Das löst mein Problem leider nicht.

Nun, der Heimverzeichnis ist nicht festgelegt, meine Plattform soll sich jeder installieren können wo er will. Für meine eigene Seite sind vollständige Dateipfade eine gute Lösung. Ich möchte auch keinen PHP-Kode in CSS haben. (da bekomme ich wieder Probleme beim XSS Schutz.)

header('X-Content-Type-Options: nosniff');
header('X-XSS-Protection: 1; mode=block');

http://th11.bplaced.net/neu/

Diese Variante funktioniert nur weil der Style Block direkt in HTML Header eingebettet ist. Das soll sich eben ändern. Jeder Benutzer soll seinen eigenen Style wählen können!

Zusammenfassung 
<style type="text/css">
html, body { cursor:url('./Grafik/zeiger.gif'), url('./Grafik/zeiger.ani'), url('./Grafik/zeiger.ico'), url('./Grafik/zeiger.cur'), auto !important; animation:cursor 800ms infinite; -webkit-animation:cursor 800ms infinite; -moz-animation:cursor 800ms infinite; }
@keyframes cursor {
0%      { cursor:url('./Grafik/zeiger1.png'), auto; }
33%     { cursor:url('./Grafik/zeiger2.png'), auto; }
66%     { cursor:url('./Grafik/zeiger3.png'), auto; }
100%    { cursor:url('./Grafik/zeiger4.png'), auto; }
}
img.Cerberus { cursor:url('./Grafik/fisch.gif'), url('./Grafik/fisch.ani'), url('./Grafik/fisch.ico'), url('./Grafik/fisch.cur'), auto !important; animation:cursor 800ms infinite; -webkit-animation:cursor 800ms infinite; -moz-animation:cursor 800ms infinite; }
@keyframes cursor {
0%      { cursor:url('./Grafik/fisch1.png'), auto; }
14.29%  { cursor:url('./Grafik/fisch2.png'), auto; }
28.57%  { cursor:url('./Grafik/fisch3.png'), auto; }
42.86%  { cursor:url('./Grafik/fisch4.png'), auto; }
57.14%  { cursor:url('./Grafik/fisch5.png'), auto; }
71.43%  { cursor:url('./Grafik/fisch6.png'), auto; }
85.71%  { cursor:url('./Grafik/fisch7.png'), auto; }
100%    { cursor:url('./Grafik/fisch8.png'), auto; }
}
img.Graeten { cursor:url('./Grafik/graeten.gif'), url('./Grafik/graeten.ico'), url('./Grafik/graeten.cur'), url('./Grafik/graeten.png'), auto !important; }
</style>

Ein „include“ bzw. „require“ ins HTML Kopf würde funktionieren, ist aber dumm, da der Inhalt jedes Mal neu geladen werden muss und nicht aus dem Browsercache geladen werden kann.

Was mich stutzig macht ist die Tatsache, dass zum Beispiel background-Image: url(’’); einwandfrei funktioniert (so wie es sein sollte), cursor: url(’’); jedoch nicht.
Es scheint ein blöder Internet Explorer Bug zu sein!

Ich glaube ich bleibe bei dem CSS Hack für Internet Explorer 10+ es scheint mir die beste Lösung zu sein.

4

Nur so ein Hinweis: lies dir mal die AGB bzgl. Impressum durch. Und wenn du schon die IP-Adresse speicherst, solltest du auch gleich eine Datenschutzerklärung hinzufügen…

5

hm, also ich habe leider kein Windows zum Testen, falls es denn wirklich ein Bug sein sollte, dann ist das sowieso nicht sooo schlimm, da die MSIE-Engine ja bald durch Chromium ersetzt wird.

Für IE 9 und älter konnte man sonst einfach html-tags für das Inkludieren und separate Überschreiben verwenden, statt @media-Kombinationen, mit IE10 geht das wohl nicht mehr, da wäre https://css-tricks.com/ie-10-specific-styles/ angemessener.

https://caniuse.com/#feat=mdn-css_properties_cursor_url erwähnt zumindest keine Bekannten Fehler zu der Sache.

6

Äh, Quatsch mit Soße. Impressum und Datenschutzerklärung sind nur für Gewerbebetreibende Pflicht. (zumindest in Deutschland, in Österreich sollte es ähnlich sein – Server Standort)

Ich muss grinsen, weil meine Plattform genau dafür da ist um sicherzustellen, dass Datenweitergabe nur an autorisierte Personen stattfindet. Die Plattform (DynDNS-Ersatz) ist aber nicht fertig und es ist keine Vorschau früher geplant.

Es ist technisch gesehen erforderlich die IP Adresse des Clients zu speichern damit bei Bedarf Client gesperrt werden kann und sich nicht anmelden darf! (Brute-Force-Attacke Schutz.) Dieser Schutzmechanismus ist bereits eingebaut. Probiere es einfach aus, versuche dich anzumelden. Bei zu vielen Fehlversuchen wirst Du einfach gesperrt!

Nach 10 Versuchen 3 Min. Blockade
Nach 20 Versuchen 10 Min. Blockade
Nach 30 Versuchen 30 Min. Blockade
Nach 40 Versuchen 24 Std. Blockade

PS: Leere Felder (Benutzername + Kennwort) werden nicht als Anmeldeversuch gehandhabt.

7

Danke miro für die wertvollen Tipps.
Ich kann mich aus Zeitgründen nicht um alle Browser kümmern.
Folgendes sollte für IE, Edge, FF und Chromium reichen:

./Formatierung/Format_1.css

Zusammenfassung 
html, body { cursor:url('./../Grafik/zeiger.gif') 1 1, auto; animation:Zeiger 800ms infinite; }
@supports (-ms-ime-align:auto) /** NUR Edge 12+ **/
{ html, body { cursor:url('./../Grafik/zeiger.ani'), auto; animation:none; } }
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) /* NUR IE 10+ */
{ html, body { cursor:url('./Grafik/zeiger.ani'), auto; animation:none; } }

@keyframes Zeiger
{
0%      { cursor:url('./../Grafik/zeiger1.png') 1 1, auto; }
33.33%  { cursor:url('./../Grafik/zeiger2.png') 1 1, auto; }
66.66%  { cursor:url('./../Grafik/zeiger3.png') 1 1, auto; }
100%    { cursor:url('./../Grafik/zeiger4.png') 1 1, auto; }
}

PS: Ich hatte ein ähnliches Dilemma bei den HotSpot Koordinaten des Zeigers. Beim „zeiger.gif“ ist X=1; Y=1; da kann man sich die Angebe schenken, bei anderen Zeigern jedoch brauche ich die Koordinaten…

8

Lies Dir bitte mal unsere AGB durch, Du bist unsererseits zur Bereitstellung eines vollständigen Impressums verpflichtet, gewerbetreibend hin oder her.

9

Mach ich nicht! Die Seite hat keinen Inhalt, nur der Wächter ist da. Sonst kann Google & Co. Datenkracke alle Seiten sofort finden die ich programmiert habe. Für Benutzer die sich anmelden können werde ich ein Impressum einbauen.