Modul 11: Anlage 5b: Probleme und Workarounds mit CSS und Netscape 4.x

von Reinhold Leinfelder

Diese Anlage ergänzt Anlage 5 (weitere Hinweise zu Cascading Style Sheets).

Der Kursleiter ist ganz aktuell in die CSS-Falle gestolpert und möchte Ihnen dies ersparen, daher diese Zusatzanlage zu CSS.

NN4.x und CSS-Klassen | Stylesheet-Deaktivierung in NN4.x

---

Falle 1: Überlappung von Bildern und Text ohne ersichtlichen Grund

Beim Stricken einer ganz normalen html-Seite mit Fließtext und einigen eingebauten Bildern wurde diese unter Netscape Navigator bzw. Netscape Composer 4.x völlig verrückt angezeigt (Dank an I. Raufuss, Bonn, für Fehlermeldung!): Es sah so aus (Screenshotdetail):

(größerer Screenshot (54 kb)

Bilder und Text überlappten, obwohl keinerlei Floating-Container oder irgendwas verwendet wurden, sondern die Bilder ganz normal mit <p><img scr="bild.jpg" width="xxx" height="yyy"></p> eingebunden wurden. Also klassische html-Basics. Der Text wurde allerdings (wie auch dieser) mit einem externen Stylesheet (in Arial und bestimmter Schriftgröße) formatiert. Auch daran lag es nicht. Die Seite hatte jedoch ein zweites Stylesheet eingebunden (zur Formatierung einer Steuerleiste), welches Klassen-Formatierung verwendet. Daran lag es. Das Verrückte: Die Klassenformatierung wurde auch in Netscape 4.x völlig korrekt wiedergegeben, nur trat dann im Fließtext bei der Verwendung von Bildern obiger Fehler auf. Absolut nicht nachvollziehbar.

Folgende Workarounds kann ich anbieten:

a) Vermeidung von Klassenformatierung (empfehle ich nicht, schließlich wollen wir ja schöne Seitenlayouts erstellen)

b) Einbindung der Bilder unter Verwendung des Attributs align="left", also <p><img align="left" scr="bild.jpg" width="xxx" height="yyy"></p>. Aus unerfindlichen Gründen hilft dies (im Gegensatz zu allen anderen align-Werten). Allerdings fließt dann der Text um das Bild, was man nicht in jedem Fall haben möchte.

c (empfohlen): Einbau der Bilder jeweils in eine einzellige Tabelle ohne Rand mit derselben Dimension wie das Bild, also z.B.:

<table border="0" cellpadding="3" cellspacing="2" width="500">
    <tr>
        <td><img src="Grabungsstelle.jpg" width="500" height="324" border="0"></td>
    </tr>
</table>

Das hilft!

Hier zum Ansehen die entsprechenden Seiten:

Beispiel korrekt: Formatierung wie oben mit in Tabellen eingebundenen Bildern

Beispiel mit Fehler unter Netscape 4.x: klassische Formatierung, die sich mit den Klassen der Steuerleistenformatierung beißt (Sie sehen den Fehler nur bei der Verwendung von Netscape 4.x)

Also, Quintessenz mal wieder: testen, testen, testen, mit allen Browsern und Plattformen, die Ihnen zur Verfügung stehen.

---

Falle 2: Keine Anzeige von Stylesheet-Formatierung unter Netscape 4.x (ggf. auch NN 6.x)

Netscape 4.x: Bei Netscape kann man die Darstellungsmöglichkeit von StyleSheets (bzw. zumindest der entsprechenden StyleSheet-Schriftoptionen) deaktivieren (wass unschöne Darstellungsfehler verursacht, wenn Sie auf Verwendung von StyleSheets optimiert haben). Bei Netscape 4.x (ich hab es für 4.5 getestet), scheint dies sogar standardmäßig voreingestellt zu sein. Machen Sie ggf. eine JavaScript-Browserweiche und weisen den Benutzer bei Verwendung von Netscape 4 (ggf. auch 6) darauf hin, dass er die Verwendung "dynamischer Schriftarten" aktiviert haben sollte. Ggf. teilen Sie ihm via Alert-Box oder popup-Seite mit wie es geht: Menu Bearbeiten -> Voreinstellungen -> Gesamtbild:Schriftarten und dort "dynamische Schriften verwenden" aktivieren. (Screenshot)

Wenigstens ist in diesem Browser standardmäßig voreingestellt, dass Formatvorlagen verwendet werden können (das bezieht sich aber eben leider nicht auf die Schriften): auch hier kann es Probleme geben. Die Verwendung von Formatvorlagen könnte der Benutzer hier deaktiviert haben: Menu Bearbeiten -> Voreinstellungen -> Erweitert: "Formatvorlagen aktivieren". (Screenshot)

Netscape 6.x: Auch hier kann die Darstellung von außen definierter (also insb. via Stylesheet definierter Schriften) deaktiviert werden und zwar wieder unter Gesamtbild: Schriftarten. Dort heißt es: "Immer die eigenen Schriftarten verwenden (auch wenn Webseiten andere vorgeben)". Diese Option darf nicht aktiviert sein (Screenshot). Erfreulicherweise kann man die Verwendung von Stylesheets aber nicht generell deaktivieren.

Internet Explorer 5 und 6: Meines Wissens kann man hier weder dynamische Schriftarten noch die Verwendung von StyleSheets deaktivieren, was uns viel Arbeit erspart (in Ermangelung früherer Versionen kann ich dies nicht für ältere Versionen testen).

Workarounds:

a) JavaScript-Browserweiche, die bei Verwendung von Netscape 4.x ggf. eine alternative Version ohne Stylesheets anbietet (viel Aufwand und ärgerlich, da man bei richtiger Einstellung von Netscape 4 ja die Seiten korrekt sehen könnte).

b) Direkter Hinweis bei Seitenaufruf, dass diese Seiten dynamische Schriften und Stylesheets verwenden, ggf. mit Link zu einer erläuternden Seite. Einfachste Lösung, verwirrt aber evtl. die vielen anderen Nutzer modernerer Browser, für die dieser Hinweis überflüssig ist.

c (empfohlen) JavaScript, welches diesen Link nur bei Verwendung von Netscape 4 anzeigt (Beispiel siehe unten).

Es gibt meines Wissens keine Möglichkeit, direkt via Skript herauslesen zu lassen, ob ein Benutzer dynamische Schriftdarstellung aktiviert hat oder nicht. Auf der entsprechenen erläuternden Seite können Sie aber einen Screenshot in korrekter Formatierung (unter Netscape 4.x) darstellen, bei dem der Nutzer mit seiner Darstellung vergleichen kann.

Hier eine Vorlage mir Erläuterung zur evtl. Verwendung für Workaround c.:

Tipp: Sie können die ganze Vorlage als Zip-Archiv herunterladen und selbst verwenden, lesen Sie aber zuvor die Erläuterung via obigem Link.

Wenn sich die Webnutzer an unsere Vorschläge halten, sind für sie nun viele Webseiten wohl um vieles schöner werden. Dennoch können Sie nicht davon ausgehen, dass alle Webnutzer sich wie gewünscht verhalten. Testen Sie deshalb Ihre Seiten auch ohne die Verwendung von StyleSheets. Man sollte wenigstens die Inhalte noch lesen können, auch wenn die schöne Formatierung dann futsch ist :-(

---

Inhaltsseite

Anlagenverzeichnis