WP Design für IE anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
album
auto
bild
blocken
code
datei
display
element
galerie
http
image
impressum
internet
kontakt
kopf
navigation
position
problem
text
url
-
Hallo,
ich selbst weiß leider nicht woran es liegt und ergo auch nicht wie ich es beheben könnte. Folgendes Problem taucht im IE auf, die Menü-Navigation ist komplett unsichtbar, lediglich der Mausover funktioniert.
Anschauen könnt ihr euch die Seite hier: http://www.intoxi-hd.de/
Meine CSS sieht an entsprechender Stelle so aus:
/* main navigation */ /*#nav { background: url(../../images/topnav.jpg) repeat-x bottom #322C2C; min-width: 990px; } */ #nav-content { margin: 0 auto; min-width: 990px; } #nav .sf-menu { float: left; line-height: 1.1; max-width: 990px; } #nav .sf-menu a { display: block; text-decoration: none; padding: 80px 12px 11px; color: #AAA; font-size: 0px; } #nav .sf-menu ul li { border: 1px solid #474331; margin-top: -1px; } /*#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #373331; color: #FFF; } #nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; } #nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; } */ #nav .sf-menu li li a { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; } #nav .sf-menu .sf-with-ul { padding-right: 15px; } #nav .sf-sub-indicator { width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; } #nav .sf-menu ul .sf-sub-indicator { display: none; } #nav .quick-nav li { padding-top: 8px; } .quick-nav li { padding: 1px 0 0 1px; } .quick-nav a:link, .quick-nav a:visited { display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.9; } .quick-nav a:hover { opacity: 1; } .quick-nav #rss { background: url(../../images/menu/RSS-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #rss:link { background: url(../../images/menu/RSS-Polaroid.png)no-repeat; text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #rss:hover { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #rss:active { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter { background: url(../../images/menu/Twitter-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #twitter:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #twitter:hover { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter:active { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook { background: url(../../images/menu/Facebook-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #facebook:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #facebook:hover { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook:active { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } /* .quick-nav #facebook { background: url(../../images/facebook.png) no-repeat; } .quick-nav #twitter { background: url(../../images/twitter.png) no-repeat; } .quick-nav #rss { background: url(../../images/rss.png) no-repeat; } /* Start main navigation Mouseover */ /* #menu-item-1226 = Home */ #menu-item-1226 { background: url(../../images/menu/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; } #menu-item-1226:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1226:hover { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1226:active { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1233 = Galerien */ #menu-item-1233 { background: url(../../images/menu/Galerien-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; } #menu-item-1233:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1233:hover { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1233:active { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1229 = Blog #menu-item-1229 { background: url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 160px; height: 160px; } #menu-item-1229:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1229:hover { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1229:active { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } */ /* #menu-item-1230 = Kontakt */ #menu-item-1230 { background: url(../../images/menu/Kontakt-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1230:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1230:hover { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1230:active { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1231 = Sitemap */ #menu-item-1231 { background: url(../../images/menu/Sitemap-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1231:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1231:hover { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1231:active { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1228 = Impressum */ #menu-item-1228 { background: url(../../images/menu/Impressum-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1228:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1228:hover { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1228:active { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; }
Es sollte eigentlich so aussehen (Screenshot FF 4): http://i46.photobucket.com/albums/f133/rotuganda/intoxicating-imagesBerauschendeBilder.jpg
Hat Jemand von euch eine Idee wie ich dem IE das auch schmackhaft machen kann? Herzlichen Dank schon mal! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sieht für mich weniger nach einem CSS-Problem, sondern vielmehr nach einem mit JS aus...
Prüfe mal die Datei javascript.js, von der offensichtlich etwas Falsches zurückgeliefert wird.
Wahrscheinlich hast du einen Funktionsnamen falsch geschrieben, etc.
Beitrag zuletzt geändert: 16.5.2011 17:45:37 von anti-atomkraft -
Hallo,
dank dir für deine Antwort. Ich habe aber am Javascript nichts verändert - ich wüsste nicht was sich da verändert haben sollte (ich habe noch nie an Java etwas verändert, was genau soll ich den da verändern?
Falls Jemand noch eine andere Idee hat wäre ich dankbar! -
Zunächst mal : JavaScript und Java sind trotz der Namensähnlichkeit etwas anderes.
Zum Problem : Mit dem IE ( den ich eigentlich nie nutze, nur jetzt mal zum Test ) sieht die Seite wirklich grauenvoll aus. Mit der Version 6 noch schlimmer als mit Version 8. Weil ich mit virtuellen PCs arbeite, die unterschiedlich konfiguriert sind, konnte ich das gerade direkt vergleichen.
Ich könnte jetzt lästern und behaupten : Wenn man anbietet, für andere Wordpress-Webseiten gestalten zu wollen, sollte man sich auch damit auskennen, aber das bringt ja keinen weiter. Als ich meine ersten selbst gestalteten Webseiten mal mit dem IE ansah, statt mit dem Firefox, stimmte dort fast gar nichts. Als Ursache erwiesen sich u.a. durch den IE fehlinterpretierte CSS-Anweisungen. Außerdem mußte ich einige Bilder durch "absolute" und "fixed" neu positionieren, damit alles im IE wenigstens annähernd der Darstellung beim Firefox ähnelt.
Auch wenn ich spontan keine Lösung weiß : Es ist immer sinnvoll, während der Entwicklungsphase mit den schlechtesten Möglichkeiten zu beginnen. Das wäre in diesem Fall der IE, und zwar eine ältere Version, z.B. Version 6. Ähnliche Erfahrungen habe ich früher mit Delphi gemacht : Wenn man Quelltexte von einer neuen Version ausgehend abwärtskompatibel machen will, ist das immer schwieriger, als mit der ältesten Version zu beginnen.
Sieh doch mal, ob Du bei einem Link der folgenden Google-Suchen eine Problemlösung findest :
"probleme mit dem IE"+"onmouseover"
wordpressprobleme mit dem IE
P.S. : Ich habe gerade mal den Quelltext Deiner Seite mit dem "KompoZer" geladen. Da wird mir gezeigt, daß 9 externe CSS-Dateien und 2 interne CSS benutzt werden. Vielleicht schließt sich da irgendetwas gegenseitig aus, was dem IE auffältt und dem FF nicht ?
Andererseits fiel mir in der Datei "http://www.intoxi-hd.de/wp-content/themes/arras/js/superfish/hoverIntent.js" diese Stelle auf :// A private function for handling mouse 'hovering'
Ich stecke da nicht drin, aber das kommt mir doch zumindest nachdenkenswürdig vor.
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
Beitrag zuletzt geändert: 17.5.2011 7:20:30 von pflanzenfreund -
pflanzenfreund schrieb:
Zunächst mal : JavaScript und Java sind trotz der Namensähnlichkeit etwas anderes.
Ich kenne mich weder mit dem einen noch mit dem anderen aus und auch nicht mit den Unterschieden.
Zum Problem : Mit dem IE ( den ich eigentlich nie nutze, nur jetzt mal zum Test ) sieht die Seite wirklich grauenvoll aus. Mit der Version 6 noch schlimmer als mit Version 8. Weil ich mit virtuellen PCs arbeite, die unterschiedlich konfiguriert sind, konnte ich das gerade direkt vergleichen.
Ja das hatte ich befürchtete - es war aber vor der Menü Umgestaltung nicht so.
Ich könnte jetzt lästern und behaupten : Wenn man anbietet, für andere Wordpress-Webseiten gestalten zu wollen, sollte man sich auch damit auskennen, aber das bringt ja keinen weiter. Als ich meine ersten selbst gestalteten Webseiten mal mit dem IE ansah, statt mit dem Firefox, stimmte dort fast gar nichts. Als Ursache erwiesen sich u.a. durch den IE fehlinterpretierte CSS-Anweisungen. Außerdem mußte ich einige Bilder durch "absolute" und "fixed" neu positionieren, damit alles im IE wenigstens annähernd der Darstellung beim Firefox ähnelt.
Ja könntest du - aber Theme Gestaltung habe ich nirgendwo angeboten, also auch kein Ablästern möglich. Ich biete lediglich an einen WP Blog zu installieren, nirgendwo habe ich etwas von Designanpassungen geschrieben, damit kenne ich mich auch viel zu wenig aus. Ich bin bemüht mir Wissen (Lösungen) anzueignen um das Problem IE und FF in den Griff zubekommen, ich werde mich mal mit deinen Links befassen.
Auch wenn ich spontan keine Lösung weiß : Es ist immer sinnvoll, während der Entwicklungsphase mit den schlechtesten Möglichkeiten zu beginnen. Das wäre in diesem Fall der IE, und zwar eine ältere Version, z.B. Version 6. Ähnliche Erfahrungen habe ich früher mit Delphi gemacht : Wenn man Quelltexte von einer neuen Version ausgehend abwärtskompatibel machen will, ist das immer schwieriger, als mit der ältesten Version zu beginnen.
Sieh doch mal, ob Du bei einem Link der folgenden Google-Suchen eine Problemlösung findest :
"probleme mit dem IE"+"onmouseover"
wordpressprobleme mit dem IE
Vielen Dank für deine Links bzw. Suchergebnisse ich werde mich da mal durchlesen und hoffe zu einer Lösung zukommen.
P.S. : Ich habe gerade mal den Quelltext Deiner Seite mit dem "KompoZer" geladen. Da wird mir gezeigt, daß 9 externe CSS-Dateien und 2 interne CSS benutzt werden. Vielleicht schließt sich da irgendetwas gegenseitig aus, was dem IE auffältt und dem FF nicht ?
Andererseits fiel mir in der Datei "http://www.intoxi-hd.de/wp-content/themes/arras/js/superfish/hoverIntent.js" diese Stelle auf :// A private function for handling mouse 'hovering'
Ich stecke da nicht drin, aber das kommt mir doch zumindest nachdenkenswürdig vor.
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
Das Problem ist, dass durch das verwendete Theme und zusätzlich installierte Plugins natürlich auch Javascripte aufgerufen werden. Was meinst du denn, was ich damit machen sollte oder worauf mich das hinweisen sollte? Und wegen der vielen CSS-Dateien, auch danach werde ich mal sehen, gibt es eine "einfache" Möglichkeit herauszufinden welche auch tatsächlich (vielleicht sogar von was) angesprochen werden?
Vielen Dank für deine Mühe! -
Hallo rotuganda !
So ausführlich hättest Du mich nicht zitieren müssen. Zunächst mal dazu : "Ich biete lediglich an einen WP Blog zu installieren, nirgendwo habe ich etwas von Designanpassungen geschrieben, damit kenne ich mich auch viel zu wenig aus." Wahrscheinlich ging es mir bei der Bewertung Deines Angebotes ähnlich wie Dir bei dem Unterschied zwischen Java und Javascript. Andererseits : Mich würde schon wundern, warum jemand sich das pure Wordpress von jemandem anderen installieren lassen sollte, statt es selbst zu machen.
Hierzu : "gibt es eine "einfache" Möglichkeit herauszufinden welche auch tatsächlich (vielleicht sogar von was) angesprochen werden?" Eine einfache Möglichkeit sehe ich nicht. Es ist natürlich richtig, daß sich Wordpress viel komplizierter gestalten läßt als einfache HTML-Seiten. Gerade darum ist mir ohne genaue Kenntnis der installierten Themen und Plugins nicht möglich, Dir zu helfen. Meine Wordpress-Kenntnisse sind aber minimal. Ich habe lediglich die Erfahrung gemacht, daß mehr als die Hälfte der von mir zunächst installierten Plugins überhaupt nicht ( ! ) funktionierten. Das ist einer der Gründe, daß ich es persönlich erst mal sein ließ, mich weiter mit Wordpress zu befassen. Selbst, falls Du die Themes und Plugins nennen würdest, bezweifle ich, mich damit auszukennen und/oder da Ursachen entdecken zu können.
Du schreibst : "es war aber vor der Menü Umgestaltung nicht so". Wenn der IE mit der neuen Reihenfolge nicht klar kommt, bleibt die Frage, was Du Grundlegendes verändert hast. Vor großen Änderungen sollte man ( gerade bei so komplexen Sachen ) immer Sicherheitskopien anlegen.
Leider kann ich Dir nicht konkreter weiterhelfen, hoffe aber, daß die allgemeinen Hinweise und Links dennoch nützlich sind bzw. waren.
Beitrag zuletzt geändert: 17.5.2011 10:32:43 von pflanzenfreund -
Hallo,
dank dir für deine erneuten Bemühungen. meine erster Anlauf zu Google brachte mir bisher noch nicht viel ein, aber ich kann ja weiter suchen.
Das es bei HTML-Seiten einfacher ist, weiß ich da hätte ich es auch vermutlich selbst gefunden, soweit reichen ja meine Kenntnisse noch aus. Ich habe natürlich auch eine Sicherung meiner Daten und natürlich könnte ich alles rückgängig machen - aber ich mag doch mein neues Menü
und möchte es ja nur dem IE ein bisschen schmackhaft machen.
/* main navigation */ /*#nav { background: url(../../images/topnav.jpg) no-repeat bottom #322C2C; min-width: 990px; height: 20px; } */ #nav-content { margin: 0 auto; min-width: 990px; } #nav .sf-menu { float: left; line-height: 1.1; max-width: 990px; } #nav .sf-menu a { display: block; text-decoration: none; padding: 80px 12px 11px; color: #AAA; font-size: 0px; } #nav .sf-menu ul li { border: 1px solid #474331; margin-top: -1px; } /*#nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #373331; color: #FFF; } #nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; } #nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; } */ #nav .sf-menu li li a { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; } #nav .sf-menu .sf-with-ul { padding-right: 15px; } #nav .sf-sub-indicator { width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; } #nav .sf-menu ul .sf-sub-indicator { display: none; } #nav .quick-nav li { padding-top: 8px; } .quick-nav li { padding: 1px 0 0 1px; } .quick-nav a:link, .quick-nav a:visited { display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.7; } .quick-nav a:hover { opacity: 1; } .quick-nav #rss { background: url(../../images/menu/RSS-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #rss:link { background: url(../../images/menu/RSS-Polaroid.png)no-repeat; text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #rss:hover { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #rss:active { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter { background: url(../../images/menu/Twitter-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #twitter:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #twitter:hover { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter:active { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook { background: url(../../images/menu/Facebook-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #facebook:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #facebook:hover { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook:active { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } /* .quick-nav #facebook { background: url(../../images/facebook.png) no-repeat; } .quick-nav #twitter { background: url(../../images/twitter.png) no-repeat; } .quick-nav #rss { background: url(../../images/rss.png) no-repeat; } /* Start main navigation Mouseover */ /* #menu-item-1226 = Home */ #menu-item-1226 { background: url(../../images/menu/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; } #menu-item-1226:link { text-decoration: underline; font-size: 30px; color: #000;opacity: 0.7; } #menu-item-1226:hover { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1226:active { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1233 = Galerien */ #menu-item-1233 { background: url(../../images/menu/Galerien-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; } #menu-item-1233:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1233:hover { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1233:active { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1229 = Blog #menu-item-1229 { background: url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 160px; height: 160px; } #menu-item-1229:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1229:hover { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1229:active { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } */ /* #menu-item-1230 = Kontakt */ #menu-item-1230 { background: url(../../images/menu/Kontakt-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1230:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1230:hover { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1230:active { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1231 = Sitemap */ #menu-item-1231 { background: url(../../images/menu/Sitemap-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1231:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1231:hover { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1231:active { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; } /* #menu-item-1228 = Impressum */ #menu-item-1228 { background: url(../../images/menu/Impressum-Polaroid.png)no-repeat;width: 145px; height: 160px; } #menu-item-1228:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1228:hover { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1228:active { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; }
Ich habe in meiner CSS-Datei und ich habe auch nur diese verändert lediglich Aufrufe auskommentiert, nichts entfernt. Ich könnte also jederzeit wieder den "Ist-Zustand" auslösen, aber das möchte ich ja nicht. Ich möchte ja lieber das der IE, egal in welcher Version auch irgendwas anzeigt (und wenn es das alte Menü ist). Gibt es denn dafür eine gute Lösung, so was wie eine Browserabfrage und dann ein anderes CSS? Ich weiß das ist unqualifiziert gefragt.
Edit: ich werde mir jetzt das:http://aktuell.de.selfhtml.org/artikel/css/mouseover/ nochmal und danach das: http://aktuell.de.selfhtml.org/artikel/css/browserweiche/ durchlesen und vielleicht komme ich damit ja weiter =) !
Beitrag zuletzt geändert: 17.5.2011 11:26:55 von rotuganda -
Nun gut ! Dann ist das Problem doch offensichtlich sehr hausgemacht und hat mit dem Theme und den Plugins gar nichts zu tun. Ich habe jetzt mal den Codeteil aus dem viel zu kleinen, dafür vorgesehehen Bereich rauszukopieren und betrachtet. Es könnte sein, daß die Zeile "/*#nav { background: url(../../images/topnav.jpg) no-repeat bottom #322C2C; min-width: 990px; height: 20px; } */ bewirkt hätte, die Bilder erst einmal alle darzustellen und nicht nur während des Hover-Effektes.
Immerhin wird mir jetzt klar, wieso der Fehler überhaupt auftritt : Offensichtlich lädt der Firefox alles sofort und der IE nur bei Bedarf. Insofern scheint mir ausnahmsweise das Verhalten des IE korrekter. Nun gut, das sind letztlich auch nur Vermutungen.
Ein Verzeichnis "images" bzw. eine Datei "topnav.jpg" konnte ich nicht finden. Falls diese Datei alle Bilder nebeneinander enthält, die dann vom Hover-Effekt betroffen sind, wäre deren Weglassen wahrscheinlich die Hauptfehlerquelle.
Leider erwähnst Du nicht, wie es vorher aussah - als es noch funktionierte - und was Dich daran störte. Wahrscheinlich wäre einfacher, auf diesem Weg einen anderen Weg zu finden, die gewünschte Darstellung auch beim IE zu bekommen.
Übrigens : Der Halbtransparent-Effekt bei den drei kleineren Bildern rechts ist wirkungsvoll, während die Farbveränderung zu rot bei den anderen Bildern nur bei sehr genauem Hinsehen auffällt. Insofern ist das ohnehin noch nicht optimal.
Beitrag zuletzt geändert: 17.5.2011 13:10:59 von pflanzenfreund -
Und wieder danke für deine Mühe!
Also ich habe die von dir angesprochene Funktion wieder eingebaut (das war aber nur der schwarze Balken aus dem Standard) und hat leider auch nichts verändert...
Ich habe jetzt wieder auf das alte Design umgestellt und versuche gerade das ganze auf meiner Testseite zu simulieren, sobald es dort steht gebe ich den Link. Du kannst dir jetzt auf jeden Fall anschauen wie es vorher aussah.
Ich befürchte auch das mir schlicht und ergreifend das:
Browserkompatibilität
Quelle: http://aktuell.de.selfhtml.org/artikel/css/mouseover/
Die erste CSS-Methode von René funktioniert im Internet Explorer ab Version 5.0, in Netscape 6 und in Opera 5 sehr gut, die Methode für grafische Buttons nur in den ganz neuen Browsern (Version 6). Probleme bei CSS bereitet allgemein immer Netscape 4. Dieser Browser interpretiert a:hover nicht. Aufgrund seiner sehr schlechten Stylesheet-Implementation kann es sogar passieren, dass Netscape 4 die Links so stark verunstaltet, dass sie nicht mehr benutzbar sind.
Abhilfe kann hier eine Seite Browserweiche schaffen, bei der man die Angaben, die Netscape 4 Probleme machen, vor diesem Browser versteckt.
nach obennach unten
Vor- und Nachteile der CSS-Methode
Buttons, die auf diese Art erstellt werden, haben vor allem den Vorteil, dass sie ohne jeglichen Javascript-Code auskommen, was vor allem diejenigen freuen dürfte, die entweder kein Javascript mögen, oder es nicht beherrschen. Außerdem verringert ein Button, der aus Text statt aus Grafik besteht, die Ladezeit deutlich. Layoutänderungen auf allen Seiten gleichzeitig sind durch eine externe Stylesheetdatei auch deutlich einfacher. Auch die optische Unterscheidung von bereits besuchten Linkzielen und noch nicht besuchten ist, wie bei Textlinks üblich, möglich.
Nachteile hat diese Methode allerdings auch: Netscape 4 kann, wie bereits erläutert, nicht alle CSS-Angaben ordnungsgemäß darstellen. Der Anteil der Netscape-4-Nutzer bei den Surfern dürfte momentan noch bei etwa 5 - 8 % liegen. Die Gestaltungsmöglichkeiten von CSS-Buttons sind auch relativ begrenzt. Es sind zum Beispiel keine elliptischen Buttons möglich, auch kann man keine exotischen Schriftarten einsetzen. Anti-Aliasing-Effekte (Kantenglättung) sind ebenfalls nicht möglich. Bei einer Grafik ist die Schrift in dieser enthalten und es ist daher egal, ob diese auf dem System des Betrachters installiert ist oder nicht. Bei einem Text-Button können dagegen nur Schriftarten angezeigt werden, die auch auf dem System des Betrachters vorhanden sind.
dazwischen kommt... also falls du noch eine Idee hast wie ich es schaffe im IE einfach das Standard-Design anzuzeigen wäre ich dir dankbar!
Die Edit: ich habe mal die Quelle noch dazu gepackt (dachte das hätte ich gemacht).
Beitrag zuletzt geändert: 19.5.2011 10:52:51 von rotuganda -
Woher hast du denn, dass noch ca. 6-8% der Nutzer Netscape nutzen? Ist das die bisherige Statistik deiner Webseite? Oder hast du das gelesen?
Netscape wird mittlerweile (fast) gar nicht mehr verwendet. Er ist veraltet, hat zu wenig Möglichkeiten, zu wenig Implementierungen und Add-Ons. Auch weil der Support mittlerweile komplett eingestellt wurde, die letzte Version ca. drei Jahre zurückliegt. Selbst auf der offiziellen Netscape Navigator-Seite. Also die des Browserswird mittlerweile für Firefox geworben (http://browser.netscape.com/).
Du kannst ihn also getrost und ohne Zweifel vernachlässigen!
Internet Explorer geringer als Version 5 wird auch nicht mehr verwendet. Du kannst die Methode also problemlos verwenden.
Zu deinem eigentlichen Problem:
Ich habe leider nicht so ganz verstanden, was du möchtest. Kannst du - wenn du die Testseite fertig gescriptet hast - nochmal in ein/zwei Sätzen dein Anliegen beschreiben? Das wäre nett. Danke! :-) -
Hallo biolauri !
Meines Wissens ist Mozilla ( und somit der FF ) ein direkter Abkömmling von Netscape. Ich würde auch davon ausgehen, daß keiner mehr den veralteten Netscape benutzt - und wenn doch, dann selbst Schuld. Ich vermute, daß Sie ihr Zitat aus einem Google-Link hat. Mitunter findet man da leider völlig veraltete Sachen, zu deren Aktualisierung später keiner mehr die nötige Lust aufbrachte.
Wie ich gerade sah, hat rotuganda ihre Seite http://www.intoxi-hd.de/ wieder hergestellt. Mit FF sind alle grafischen Links zu sehen, mit dem IE immer nur der, über dem sich gerade der Mauscursor befindet. -
Hallo Pflanzenfreund!
Stimmt nicht ganz. Die Ursprünge von FF und anderen (guten) Browsern sind sicherlich von Netscape. Allerdings ist die neueste Netscape-Version ein Abkömmling von FF 2.0.
Mit dem anderen hast du recht! Netscape benutzt heute echt niemand mehr.
Ich habe mir die Seite angesehen. Ich könnte mir vorstellen, dass der Internet Explorer die CSS-Regel "background-size:" falsch interpretiert, bzw. dadurch nicht richtig dargestellt wird. Allerdings ist das nur eine vage Vermutung Sie mag falsch sein. Und ich bin zu müde zum Testen. Tut mir Leid.
Ich werde es morgen wahrscheinlich noch einmal genauer prüfen - sofern der Autor und Problemurheber dann nicht selbst Hand angelegt hat
-
Hallo Biolauri !
Na, um die Zeit war ich schon schlafen. Meine Erkenntnisse über Mozilla bzw. Firefox stammen teils aus der Wikipedia. Daß es Netscape noch zu Zeiten des FF 2 gab, war mir neu.
Aus verschiedenen Quellen weiß ich aber, daß die Editoren "Nvu" und später "KompoZer" aus dem damaligen Netscape heraus weiterentwickelt wurden. Ich glaube, die hatten das Gesamtpaket damals "Integrator" genannt. Ist aber auch im Grunde schnurz, weil veraltet. Trotzdem habe ich das damals schon lieber benutzt als den IE.
Naja, daß die Threaderstellerin die Ursache selbst findet, glaube ich aufgrund ihrer bisherigen Beschreibungen eigentlich weniger.
Aber manchmal gibt es ja Wunder und sie bekommt die große Erleuchtung.
-
Guten Morgen Pflanzenfreund!
Ja. Meine auch
Die letzte Version kam 2008 raus und trug die erstaunlich hohe Nummer 9.irgendwas.
Wer benutzt nicht lieber andere Browser als den IE?
Das mit dem background-size stimmt nicht. Es ist gar nicht in deinen CSS-Angaben enthalten. Das hat mein Firebug da wohl reingeschmuggelt. Tut mir Leid.
Ich hab aber mal gegooglet. Folgendes Problem könnte es sein: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
Unter Punkt 3.
Oder du hast dein Bild falsch abgespeichert. Es ist z.B. so, dass der FF *.gif, die unter der Endung *.jpg laufen problemlos anzeigt. Der IE allerdings nicht. Vielleicht liegt ja ein ähnliches Problem hier vor. Dann müsstest du das Bild nochmals richtig abspeichern.
Ich kann allerdings beide Lösungen nicht austesten. Das müsstest du in deinem CSS machen. -
Also manchmal spinnt dieser eingebaute Editor.
Ich hatte hier gerade eine Menge geschrieben, wollte einen kleinen Schreibfehler korrigieren und plötzlich war alles weg und nicht mehr wiederherstellbar. 
Mal sehen, wieviel ich aus dem Kopf wieder hinbekomme.
Die These mit den möglicherweise falschen Endugen hat mich so neugierig gemacht, daß ich mal mit dem "NeoDownloader", den es kürzlich bei "GiveAwayOfTheDay" gab, die Bilder der Seite lud. Insgesamt sind es 575, wobei ich allerdings die entscheidenden gar nicht fand. Die Endungen der gefunden Bilder sind vielfältig : gif, jpeg, jpg und png, sowie einmal ico für das favicon.
Ich werde das auch gleich wieder löschen, weil das offenbar nicht zur Problemlösung beitragen kann. Außer dem Umstand, daß diese Grafiken wohl irgendwo anders stecken und vielleicht gerade darin das Problem liegt. Ich weiß es nicht.
Wahrscheinlich kann das nur jemand rausfinden, der sich sehr gut mit Wordpress auskennt. Sorry !
Interessehalber habe ich mir jetzt noch den Link http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml angesehen. Interessante Beschreibung genau dieses Phänomens. Das könnte durchaus des Rätsels Lösung bringen. Gute Recherche !
Beitrag zuletzt geändert: 19.5.2011 9:55:50 von pflanzenfreund -
biolauri schrieb: ...
Zu deinem eigentlichen Problem:
Ich habe leider nicht so ganz verstanden, was du möchtest. Kannst du - wenn du die Testseite fertig gescriptet hast - nochmal in ein/zwei Sätzen dein Anliegen beschreiben? Das wäre nett. Danke! :-)
Hallo und Danke dir für deine Mühe!
Also meine Testseite kann man getrost vergessen, denn sie zeiget nichts neues/anderes an. Ihr seht auf der angegebenen Seite (www.intoxi-hd.de) nun die Version die ich auch so belassen werde. Ich habe jetzt damit die IE-user auch ein Menü haben ein zweites (topmenu) oberhalb der Seite eingepflegt. Diese "Lösung" ist nicht optimal, da das eigentliche Problem ja auch nicht gelöst wurde, aber es geht so für mich erstmal.
Meine CSS-Datei (bzw. die veränderte Stelle) sieht derzeit so aus:
/* main navigation */ /*#nav { background: url(../../images/topnav.jpg) no-repeat bottom #322C2C; min-width: 990px; height: 20px; } */ #nav-content { margin: 0 auto; min-width: 990px; } #nav .sf-menu { float: left; line-height: 1.1; max-width: 990px; } #nav .sf-menu a { display: block; text-decoration: none; padding: 80px 12px 11px; color: #AAA; font-size: 0px; } #nav .sf-menu ul li { border: 1px solid #474331; margin-top: -1px; } /* #nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #373331; color: #FFF; } #nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; } #nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; } nav .sf-menu a:hover, #nav .sf-menu li:hover, #nav .sf-menu li.sfHover, #nav .sf-menu ul li { background: #373331; color: #FFF; } #nav .sf-menu ul a:hover, #nav .sf-menu ul li.sfHover, #nav .sf-menu ul li:hover { color: #373331; background: #FFF; } #nav .sf-menu ul li.sfHover a.sf-with-ul { color: #373331; } #nav .sf-menu li li a { padding: 7px 10px; line-height: 1; height: auto; font-size: 12px; } #nav .sf-menu .sf-with-ul { padding-right: 15px; } #nav .sf-sub-indicator { width: 5px; height: 5px; text-indent: -9999px; display: inline-block; position: relative; left: 7px; top: 0; vertical-align: middle; } #nav .sf-menu ul .sf-sub-indicator { display: none; } */ #nav .quick-nav li { padding-top: 8px; } .quick-nav li { padding: 1px 0 0 1px; } .quick-nav a:link, .quick-nav a:visited { display: block; text-indent: -9000px; width: 16px; height: 16px; float: left; clear: left; opacity: 0.8; } .quick-nav a:hover { opacity: 1; } .quick-nav #rss { display:block; background-image: url(../../images/menu/RSS-Polaroid.png)no-repeat; width: 80px; height: 90px; } .quick-nav #rss:link { background: url(../../images/menu/RSS-Polaroid.png)no-repeat; text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #rss:hover { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #rss:active { background-image:url(../../images/menu/RSS-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter { background: url(../../images/menu/Twitter-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #twitter:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #twitter:hover { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #twitter:active { background-image:url(../../images/menu/Twitter-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook { background: url(../../images/menu/Facebook-Polaroid.png)no-repeat; background-position:0px 0px; width: 80px; height: 90px; } .quick-nav #facebook:link { text-decoration: underline; font-size: 30px; color: #000; } .quick-nav #facebook:hover { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } .quick-nav #facebook:active { background-image:url(../../images/menu/Facebook-Polaroid-on.png);background-repeat:no-repeat; } /* .quick-nav #facebook { background: url(../../images/facebook.png) no-repeat; } .quick-nav #twitter { background: url(../../images/twitter.png) no-repeat; } .quick-nav #rss { background: url(../../images/rss.png) no-repeat; } /* Start main navigation Mouseover */ /* #menu-item-1226 = Home */ #menu-item-1226 { background: url(../../images/menu/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; opacity: 0.8; } #menu-item-1226:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1226:hover { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } #menu-item-1226:active { background-image:url(../../images/menu/Home-Polaroid-on.png);background-repeat:no-repeat;opacity: 1; } /* #menu-item-1233 = Galerien */ #menu-item-1233 { background: url(../../images/menu/Galerien-Polaroid.png)no-repeat; background-position:0px 0px; width: 145px; height: 160px; opacity: 0.8; } #menu-item-1233:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1233:hover { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } #menu-item-1233:active { background-image:url(../../images/menu/Galerien-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } /* #menu-item-1229 = Blog #menu-item-1229 { background: url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid.png)no-repeat; background-position:0px 0px; width: 160px; height: 160px; } #menu-item-1229:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1229:hover { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } #menu-item-1229:active { background-image:url(http://i46.photobucket.com/albums/f133/rotuganda/Home-Polaroid-on.png);background-repeat:no-repeat; } */ /* #menu-item-1230 = Kontakt */ #menu-item-1230 { background: url(../../images/menu/Kontakt-Polaroid.png)no-repeat;width: 145px; height: 160px; opacity: 0.8; } #menu-item-1230:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1230:hover { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } #menu-item-1230:active { background-image:url(../../images/menu/Kontakt-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } /* #menu-item-1231 = Sitemap */ #menu-item-1231 { background: url(../../images/menu/Sitemap-Polaroid.png)no-repeat;width: 145px; height: 160px; opacity: 0.8; } #menu-item-1231:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1231:hover { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } #menu-item-1231:active { background-image:url(../../images/menu/Sitemap-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } /* #menu-item-1228 = Impressum */ #menu-item-1228 { background: url(../../images/menu/Impressum-Polaroid.png)no-repeat;width: 145px; height: 160px; opacity: 0.8; } #menu-item-1228:link { text-decoration: underline; font-size: 30px; color: #000; } #menu-item-1228:hover { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; } #menu-item-1228:active { background-image:url(../../images/menu/Impressum-Polaroid-on.png);background-repeat:no-repeat; opacity: 1; }
Ich selbst habe verschiedene Dinge versucht, z.B. das: http://www.html.de/css/19890-probleme-mit-css-mouseover-im-ie.html aber irgendwie was ich auch geändert hatte, die Anzeige blieb wie sie ist - der "On Mouse" wird angezeigt wenn man zufällig an die richtige Stelle mit der Maus kommt, der Button an sich nicht.
Deinen Link habe ich mir eben "flüchtig" angesehen und muss gestehen das mein Englisch wohl eher mäßig ist... ich lese es nochmals mit viel Zeit und Ruhe durch, vielen Dank!
Zu deiner Theorie das ich eventuell Bilder mit falscher Dateizuordnung abgespeichert habe kann ich definitiv sagen, das dies nicht der Fall ist. Ist wirklich ausgeschlossen, es sind alles .png´s auch alle in selber Weise mit richtiger Endung abgespeichert. Ich weiß ja nicht viel aber damit kenne ich mich schon von Berufswegen aus ;)
Das was ich zu meinem Problem ergoogeln konnte war eben das der IE ein Problem mit dem hover oder a bzw. in Kombination hat, aber ich bekomme es leider nicht gelöst. Eventuell nur durch einsetzen eines weiteren Javascriptes und das möchte ich sicher nicht (sind so oder so schon genug Scripte auf der Seite).
Vielen Dank nochmal für die Mühe! -
Ich verstehe etwas nicht : Ich habe doch Deine Seite mit einem speziellen Programm gescannt und alle Bilder runter geladen. Aber ich finde die Menübilder nicht. Wenn ich den Quelltext der Seite lade ( so wie er mir dann angezeigt wird ) - werden die Bilder zwar gezeigt, aber im Quelltext finde ich sie nicht, sondern nur das Menü, in dem sie irgendwo versteckt sein müssen :
<ul id="menu-menu" class="sf-menu menu clearfix">
<li id="menu-item-1226"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1226"><a
href="http://www.intoxi-hd.de/">Startseite</a><br />
</li>
<li id="menu-item-1233"
class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1233"><a
href="http://www.intoxi-hd.de/Galerien/">Galerien</a><br />
</li>
<li id="menu-item-1230"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1230"><a
href="http://www.intoxi-hd.de/kontakt/">Kontakt</a><br />
</li>
<li id="menu-item-1231"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1231"><a
href="http://www.intoxi-hd.de/sitemap/">Sitemap</a><br />
</li>
<li id="menu-item-1228"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1228"><a
href="http://www.intoxi-hd.de/impressum/">Impressum</a><br />
</li>
</ul>
</div>
Was hat es z.B. mit diesem "clearfix" auf sich ?
Die entscheidenden Hover-Anweisungen dürften sich wahrscheinlich in der Datei "http://www.intoxi-hd.de/wp-content/themes/arras/css/styles/intoxi.css" befinden. Ach ! Ich sehe gerade, aus der stammt ja auch Dein Quelltextauszug. Warum nennst Du denn nicht gleich den Link ? Das läßt sich sonst immer so schlecht lesen. Ach ja, und da taucht dann mit viel Suchen nach Rückwerkslinks auch mal ein Bild auf, z.B. "http://www.intoxi-hd.de/wp-content/themes/arras/images/menu/RSS-Polaroid-on.png"
Mensch, machst Du es den Leuten schwer, die Dir helfen wollen. Oder genauer : Wordpress macht es einem schwer.
Also ich gebe hierbei nun doch endgültig auf. Viel Glück noch.
-
Dank dir für deine Mühe - wenn es einfach wäre, hätte ich es schon gelöst, schätze ich ;)
Ich habe jetzt folgendes versucht:3. Disappearing background images
IE has a very freaky bug where it likes to make background images (and sometimes even text - particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.
Obviously you won't want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:
.foo {
background: url(filename.jpg);
position: relative
}
Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won't affect the appearance:
.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}
The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn't understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.
Hat leider auch zu keinem Erfolg geführt... -
Schade ! Ich wollte Dir gerade noch die entsprechende Stelle mit "Google Translate" übersetzen. Das hat sich dann ja auch erübrigt. Na gut, daß Du es selbst gelöst hättest, wenn es einfach wäre, halte ich für ausgesprochen wahrscheinlich !
-
pflanzenfreund schrieb:
Ich verstehe etwas nicht : Ich habe doch Deine Seite mit einem speziellen Programm gescannt und alle Bilder runter geladen. Aber ich finde die Menübilder nicht. Wenn ich den Quelltext der Seite lade ( so wie er mir dann angezeigt wird ) - werden die Bilder zwar gezeigt, aber im Quelltext finde ich sie nicht, sondern nur das Menü, in dem sie irgendwo versteckt sein müssen :
Die Bilder sind als Hintergründe im CSS definiert. Daher erscheinen sie nicht im HTML-Code.
Was hat es z.B. mit diesem "clearfix" auf sich ?
Die Klasse '.clearfix' lässt die Liste als
anzeigen. Das bedeutet, dass die Liste von außen her als Inline-Element, von innen als Block-Element gesehen wird..clearfix { display: inline-block; }
Die entscheidenden Hover-Anweisungen dürften sich wahrscheinlich in der Datei "http://www.intoxi-hd.de/wp-content/themes/arras/css/styles/intoxi.css" befinden. Ach ! Ich sehe gerade, aus der stammt ja auch Dein Quelltextauszug. Warum nennst Du denn nicht gleich den Link ? Das läßt sich sonst immer so schlecht lesen. Ach ja, und da taucht dann mit viel Suchen nach Rückwerkslinks auch mal ein Bild auf, z.B. "http://www.intoxi-hd.de/wp-content/themes/arras/images/menu/RSS-Polaroid-on.png"
Die Rückwärtslinks sind da, weil sich CSS und Bilder in unterschiedlichen Ordnern befinden. Abhilfe könnte man hier durch absolutes Adressieren schaffen. Dabei - wie bei HTML einfach mit einem "/" anfangen und so ab dem HTML-Root referenzieren. Allerdings müsste man dazu sehr wahrscheinlich das ganze WP-Theme ändern...
Vielleicht ist auch die Opacity-Regel in CSS für den IE schwer verständlich. Vielleicht die einfach mal weg lassen und schauen, obs der IE besser anzeigt. Ich kann das leider bei mir nicht testen, da es irgendwelche Komplikationen beim herunterladen der kompletten Seite gibt. Tut mir Leid. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
