Verzögerung bei Hover-Effekt (kein Bild, nur Farbe) im IE

[Rexxx]

Hallo Forum!

Ich habe bei meiner Navigation das Problem, dass der Hover-Effekt, der die Schrift- und Hintergrundfarbe beim Darüberfahren mit der Maus ändert, im IE eine massive Verzögerung (bis 3 Sek.) hat. Dabei steigt die CPU-Auslastung auf 90% - 100% an.
Im FF funktioniert alles einwandfrei ohne Verzögerung.

Der Hover-Effekt wird mit CSS bewirkt und fällt auf die <a>-Tags und wird über display:block; auf das gesamte, beinhaltende <li>-Tag "übernommen", damit auch der IE dies (oder eben gerade auch nicht?) Verarbeiten kann.

Link zur Seite: http://server-r005.hostpoint.ch/~rutschre/public_html/index2.php

Im Internet habe ich dazu eigentlich nur einen Beitrag gefunden, bei dem jemand das Gleiche hat(te), jedoch keine Verweise/Codes und auch keine Hilfe beinhaltet.

Auszug aus der über PHP inkludierten CSS-Datei, die für Navigations-Links zuständig ist:

  
  
a:link.navi  
 {  
 color:#000000;  
 text-decoration:none;  
 display:block;  
 padding:0px;  
 border-top:1px solid #EFEFEF;  
 border-bottom:1px solid #EFEFEF;  
 }  
  
 a:link.navi:hover  
 {  
 color:#EE1219;  
 background-color:#FFFFFF;  
 border-top:1px solid #000000;  
 border-bottom:1px solid #000000;  
 }  
  
 a:visited.navi  
 {  
 color:#000000;  
 text-decoration:none;  
 display:block;  
 padding:0px;  
 border-top:1px solid #EFEFEF;  
 border-bottom:1px solid #EFEFEF;  
 }  
  
 a:visited.navi:hover  
 {  
 color:#EE1219;  
 background-color:#FFFFFF;  
 border-top:1px solid #000000;  
 border-bottom:1px solid #000000;  
 }  
  
 a:active.navi  
 {  
 color:#000000;  
 text-decoration:none;  
 display:block;  
 padding:0px;  
 border-top:1px solid #EFEFEF;  
 border-bottom:1px solid #EFEFEF;  
 }  
  
 a:active.navi:hover  
 {  
 color:#EE1219;  
 background-color:#FFFFFF;  
 border-top:1px solid #000000;  
 border-bottom:1px solid #000000;  
 }  

Weiss jemand einen Tipp? Ich hoffe, mein Beitrag ist ausführlich und beschreibend (ansonsten lasse ich mich auch gerne belehren).

Danke fürs Lesen!

Grüsse
Reto (*der jetzt nur noch brav Rexxx als Pseudonym benutzt)

[gelu]

Hallo Rexxx,

Ich habe bei meiner Navigation das Problem, dass der Hover-Effekt, der die Schrift- und Hintergrundfarbe beim Darüberfahren mit der Maus ändert, im IE eine massive Verzögerung (bis 3 Sek.) hat. Dabei steigt die CPU-Auslastung auf 90% - 100% an.
Im FF funktioniert alles einwandfrei ohne Verzögerung.

eine Lösung kann ich Dir leider nicht anbieten, nur die Vermutung, dass es mit dem include zusammenhängt, denn

• wenn ich Deinen Code lokal in meinem Editor in einer Testseite verwende, gibt es keine Verzögerung
• wenn ich den von Dir geposteten Link mit dem IE aufrufe, gibt es nicht nur das von Dir geschilderte Problem, sondern auch erhebliche Verzögerungen beim Seitenaufbau, wenn ich in den Vollbildmodus bzw. zurück ins Fenster wechsle.

Vielleicht hilft's ein wenig.

Beste Grüße,
gelu

[Rexxx]

Hallo Gelu!

Tatsächlich hängt das ganze von den Stylesheets ab (siehe meine Antwort oben). Nun ist nur noch für mich herauszufinden, was genau es ausmacht... Aber ich werde weitersuchen, und bin froh, dass das Problem schon mal eingegrenzt wird.

Das Ganze ist eben schon ziemlich schräg. =)

Vielleicht hilft's ein wenig.

Bestimmt! Ich danke auch Dir für Deine Hilfe!

Viele Grüsse
Reto

[Patrick Andrieu]

Hallo Rexxx!

Link zur Seite: http://server-r005.hostpoint.ch/~rutschre/public_html/index2.php

Bevor weiter gesucht wird, wäre es angebracht, für validen Code zu sorgen.

Ach ja, entferne den <link rel> zu Deiner styles.inc.css und teste mal Deine Hover-Effekte...

Wozu überhaupt diese Benennung (styles._inc._css)?

Viele Grüße aus Frankfurt/Main,
Patrick

[Rexxx]

Hallo Patrick!

Bevor weiter gesucht wird, wäre es angebracht, für validen Code zu sorgen.

Dass der Code valide ist, ist eigentlich immer ein Ziel, leider nicht immer umsetzbar wegen des CMS-Editors.. Aber die restlichen, "selbst-verursachten" Fehler werde ich noch korrigieren.

Ach ja, entferne den <link rel> zu Deiner styles.inc.css und teste mal Deine Hover-Effekte...

Habe die restlichen Stylesheets mal ganz herausgenommen bis auf nav.inc.css, und siehe da: keine Verzögerung! Neue Testseite

Nun ist nur noch die Frage, was genau es ausmacht an den restlichen Stylesheets. Ich werde dies gleich weiter untersuchen!

Wozu überhaupt diese Benennung (styles._inc._css)?

"styles" (Name), "inc" (Inkludiert), "css" (CSS-Datei) --> 1. Ist Standard, 2. macht für mich Sinn, 3. Spielt eigentlich auch keine Rolle für Client/Server, oder?

Vielen Dank für deine Hilfe !

Beste Grüsse
Reto

[Auge]

Hallo

Wozu überhaupt diese Benennung (styles._inc._css)?

"styles" (Name),
"inc" (Inkludiert),

Warum wird das CSS (wie du in deinem Eröffnungsposting schreibst) überhaupt per PHP eingebunden?

"css" (CSS-Datei)

Was ist dann "_css"?

a:link.navi {}  
  
a:link.navi:hover {}  
  
a:visited.navi {}  
  
a:visited.navi:hover {}  
  
a:active.navi {}  
  
a:active.navi:hover {}

Was soll dieser Code bewirken? Seit wann haben Pseudoklassen ihrerseits Klassen? Vielleicht liegt es ja daran, dass der IE auf Teufel-komm-raus per Fehlerkorrektur irgendwas aus deinem "Gestammel" zu machen.

Tschö, Auge

[Rexxx]

Hallo nochmal

Habe nun den Fehler eingegrenzt und weiss nun, dass etwas von diesen CSS-Codezeilen aus dem "style.inc.css"-File ein Problem machen:

  
  
div.all  
{  
 width:800px;  
 margin:3px auto;  
 margin-top:20px;  
 margin-bottom:40px;  
 padding:0px;  
 background-color:#FFFFFF;  
 background:url(../img/bg.gif);  
}  

• und -

  
  
div.header  
{  
 height:148px;  
 width:800px;  
 margin:0px;  
 margin-bottom:10px;  
 padding:0px;  
 background-color:#FFFFFF;  
 background:url(../img/bg.gif);  
}  

Die zwei Absätze machen den Fehler aus, und beide (wenigstens in Abhängigkeit) bewirken den totalen Effekt.
Was es ganz genau ist, werde ich weiter versuchen herauszufinden.

Wollte dies noch so mitteilen bevor der Beitrag geschlossen wird.

Danke vielmals für eure Hilfe!

Reto

[Rexxx]

Der Fehler liegt bei der mehrfach (obwohl gleich) definierten Hintergrundfarbe und dem Hintergrundbild.

  
body  
{  
 ...  
 background-color:#FFFFFF;  
 background:url(../img/bg.gif);  
}  
  
div.all  
{  
 ...  
 background-color:#FFFFFF;  
 background:url(../img/bg.gif);  
}  
  
div.header  
{  
 ...  
 background-color:#FFFFFF;  
 background:url(../img/bg.gif);  
}  

Schlanker Code ist also nicht nur wegen der Aufbaugeschwindigkeit der Seite besser. Wieder mal was gelernt.

Grüsse
Reto

[at]

Hallo.

Der Fehler liegt bei der mehrfach (obwohl gleich) definierten Hintergrundfarbe und dem Hintergrundbild.

Wohl eher nur am Hintergrundbild. Je kleiner die Kachel, desto länger dauert das Verlegen. Besonders deutlich wird dies gern, wenn mann die Bildlaufleisten schnell hin und her bewegt und der Browser nicht so recht mit der Berechnung nachkommt.
MfG, at