Pfadproblem mit iehacks.css im Blitzblank-Theme behoben

Peinlich, peinlich. Da suche ich nach dem Problem, warum beim Internet Explorer 5.5 und größer die selbst gestalteten Scrollbalken nicht funktionieren, und die Lösung ist so trivial:

Die CSS-Datei iehacks aus dem YAML-Framework sowie die von mir zusätzlich für den IE7 erstellte ie7hacks.css waren nicht mit dem korrekten Pfad eingebunden. Das Problem kommt leider häufiger vor als man so denkt. Im YAML-Forum stellt sich das immer wieder als Ursache heraus, warum es Darstellungsprobleme mit dem Internet Explorer der Versionen 5 und höher gibt. Dabei unterstützt YAML das Testen, ob die Datei mit den Korrekturen für den Internet Explorer richtig eingebunden ist, auf geniale Weise. Man muss nur daran denken! Die Datei iehacks.css enthält anfangs eine auskommentierte CSS-Anweisung, die bei Entfernen der Kommentarzeichen dafür sorgt, dass der Hintergrund der Seite im Internet Explorer grün leuchtet.
/**
* (de) Fehlersuche: Hintergrund leuchtet grün, wenn das Stylesheet korrekt geladen wurde
*
* @debug
* @app-yaml-default disabled
*/
/* body { background: #0f0; background-image: none } */
Auskommentiert sieht dann die CSS-Anweisung so aus:

body { background: #0f0; background-image: none }

Im Zweifel muss man solange verschiedene Pfadeinstellungen ausprobieren, bis es dann klappt, sprich man den grünen Hintergrund im Internet Explorer sieht.

Ich habe das Problem allerdings anders gelöst. Da ich immer Probleme mit dem verschachtelten CSS-Dateisystem von YAML habe, passe ich es meinen Ordnungs- und Strukturkriterien an. Konkret heißt das, dass ich nicht über eine CSS-Datei wieder weitere CSS-Dateien aufrufe, sondern diese lieber über den Header der (X)HTML-Seiten gezielt direkt lade. Gezielt heißt dabei, dass ich die Hacks für den Internet Explorer nicht alle in eine Datei packe, sondern je nach Version des Internet Explorers in verschiedene Dateien (z.B. iehacks.css, ie7hacks.css, ie5hacks.css), die dann aufgrund von sogenannten Conditional Comments nur von den jeweiligen Internet Explorer-Versionen erkannt und geladen werden.

Wahrscheinlich wären die Pfadprobleme nicht aufgetreten, wenn ich das WordPress-Blog mit dem Theme Blitzblank im Root-/Hauptverzeichnis der Domain installiert hätte. So aber wurde eine Anpassung des Pfades für die iehacks.css erforderlich. Anstelle den richtigen relativen Dateipfad zu suchen, habe ich aber einfach den absoluten Dateipfad angegeben.
Anschließend konnte ich dann meine Darstellungsprobleme beim Internet Explorer 6 und 7 angehen und erfolgreich beseitigen. So werden nun auch im Blog die farbigen Scrollbalken beim Internet Explorer 5.5 und höher dargestellt und den hellen Spalt am unteren Rand bekam ich beim Internet Explorer 7 durch Erhöhung der Breite des Footers in der ie7hacks.css entfernt.

Leider sind aber noch nicht alle Darstellungsprobleme mit dem Internet Explorer damit gelöst. Stattdessen habe ich nun festgestellt, dass es noch folgende Probleme beim Internet Explorer 5 und 5.5 gibt:

  1. Zum einem werden die als Hintergrundgrafiken eingebundenen Icons der Social Bookmarks und die Links der Social Bookmarks völlig verstellt wiedergegeben (siehe Screenshots).
    Darstellungsfehler beim IE 5.5 Darstellungsfehler beim IE 5
  2. Zum anderen verschwindet bei kleinem Browserfenster (beispielsweise 800×600 Pixel) der Inhalt der mittleren Spalte (col3). Als Ursache vermute ich Inhalte wie lange Hyperlinks, welche die Breite der Box (= DIV, den Container) „sprengen“, so dass der Inhalt über den rechten Boxrand der mittleren Spalte herausragen müsste. Damit sollen wohl vor allem die älteren Internet Explorer so ihre Probleme haben.

2 Kommentare

  1. Dirk sagt:

    Es gibt noch einen etwas einfacheren Weg, die korrekte Einbindung der iehacks.css zu testen.

    Dafür gibts seit YAML 3 die debug.css. Diese einfach hinter der base.css ins Layout einbinden und Du bekommst im Falle einer nicht vorhandenen iehacks.css eine freundliche Warnmeldung angezeigt. Probiers mal aus.

  2. Dieter sagt:

    Herzlichen Dank für den Tipp. 🙂
    Werde ich gerne in den nächsten Tagen mal ausprobieren.
    Vielleicht baut das Jochen auch in der nächsten Version seines WordPress-Themes Blitzblank direkt ein (etwa in die header.php).
    Nachtrag: Habe es ausprobiert und ist im Bedarfsfall hilfreich (Details können der Doku zu YAML entnommen werden). Der Einbau der debug.css ist jedoch nur zur Problemlösung angezeigt, da sonst Debug YAML überall im Layout erscheint.

Hinterlasse eine Antwort

Deine Mailadresse bleibt geheim. Pflichtfelder sind mit * gekennzeichnet.

1 × 1 =

Kommentare prüfe ich grundsätzlich vor einem Freischalten!
Ich bitte um Verständnis für diese Spamschutz-Maßnahme.

Webseite veröffentlicht am Donnerstag, den 18. Oktober 2007, um 02:03 Uhr,
zuletzt geändert am Sonntag, den 22. Mai 2011, um 16:22 Uhr.
Tags: , , , , ,


Statistik: 71 Seiten, 346 Blogartikel, 1.069 Schlagworte, 1.315 Kommentare.
© 2002 - 2018 | WordPress - Mein Layout basiert auf YAML und wird durch Xtreme One angetrieben. 
Diese Website setzt Cookies ein (Datenschutz). Wenn Du diese Website weiterhin besuchst, erklärst Du Dich mit deren Verwendung einverstanden.

Durch die weitere Nutzung der Seite stimmst Du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen