CSS und IE (max-width, Schriftgrößen)

[Stefan Salewski]

Hallo,

ich hatte vor einigen Wochen meine Homepage überarbeitet und dabei zur Erzeugung eines zweispaltigen Layouts CSS entsprechend einem Beispiel auf www.selfhtml.org verwendet. Mit Mozilla oder Konqueror (Linux) ist das soweit auch ok, aber vor einigen Tagen habe ich mir das Ganze dann mal mit Internet-Explorer (XP) angesehen. Dort gibt es zwei Probleme: Ich hatte mit "max-width" die maximale Breite des Textbereichs begrenzen wollen, damit bei einem extrem weit geöffneten Browserfenster nicht zu lange Textzeilen entstehen. IE versteht diese Option irgendwie nicht.
Dann habe ich für den Navigationsbereich "font-family: sans-serif" verwendet, ohne explizit eine Schriftgröße anzugeben. Denn ich möchte, dass für den Navigationsbereich die normale Schriftgröße, die auch für den eigentlichen Text verwendet wird, benutzt wird. Mit Mozilla und Konqueror ist alles wie es seinen soll, die Schrift im Navigationsbereich und im Textbereich ist gleich groß und entspricht der Größe, die in Browser eingestellt ist. Aber der IE stellt aus irgendwelchen mir nicht ersichtlichen Gründen die Schrift im Navigationsbereich deutlich Größer dar.

Meine Seite mit CSS-Datei:
www.ssalewski.de
www.ssalewski.de/PageLayout.css

Wie löse ich diese Probleme am besten? Gibt es sonst etwas, was ich anders machen sollte?

Gruß

Stefan Salewski

[Ashura]

Hallo Stefan.

Mit Mozilla oder Konqueror (Linux) ist das soweit auch ok, aber vor einigen Tagen habe ich mir das Ganze dann mal mit Internet-Explorer (XP) angesehen.

Tipp: du brauchst kein Windows, um den IE nutzen zu können.

Ich hatte mit "max-width" die maximale Breite des Textbereichs begrenzen wollen, damit bei einem extrem weit geöffneten Browserfenster nicht zu lange Textzeilen entstehen. IE versteht diese Option irgendwie nicht.

Ja, ebenso wie min-*, was einige Workarounds erforderlich macht.

Aber der IE stellt aus irgendwelchen mir nicht ersichtlichen Gründen die Schrift im Navigationsbereich deutlich Größer dar.

Bei mir ist es genau umgekehrt: die Schrift in der Navigation ist halb so groß wie die des Fließtextes. Zumindest eine Angabe von 1em kann hier sicher nicht schaden.

Wie löse ich diese Probleme am besten? Gibt es sonst etwas, was ich anders machen sollte?

Du könntest die allgemeine Hintergrundfarbe etwas heller gestalten, momentan strengt sie die Augen ziemlich an.
Zudem kann ein display:block (und für den IE width:100%) für die Links in der Navigation nicht schaden, so dass auch die freien Flächen als Link agieren können.
Außerdem solltest du überlegen, ob du den IE 6 nicht lieber aus dem http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=Quirksmodus holen möchtest.
Die Adresse im Impressum könntest du im <http://de.selfhtml.org/html/text/zitate_adressen.htm#adressen@title=passenden Element> verpacken.

Ansonsten sehr sauberes HTML, das sieht man hier nicht oft.
Die farbliche Gestaltung wirkt auf mich etwas zu steril, aber das ist Geschmackssache.

Einen schönen Montag noch.

Gruß, Ashura

[Thomas Meinike]

Hallo,

Außerdem solltest du überlegen, ob du den IE 6 nicht lieber aus dem http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=Quirksmodus holen möchtest.

Oder ihn ganz bewusst dort lassen.

MfG, Thomas

[Ashura]

Hallo Stefan.

Ich wusste nicht, dass der IE in diesem Modus ist.
Kann man irgendwie sehen, in welchem Modus er ist?

Ja, am einfachsten durch die Eingabe und Bestätigung folgendes Codes in die Adresszeile:

javascript:alert(document.compatMode);

Befindet er sich im Quirksmodus, so gibt er „Back Compat“ aus, andernfalls „CSS1 Compat“.

Ursache für den  Quirksmodus ist nach Google dann wohl, dass "DOCTYPE" bei mir nicht in der ersten Zeile des Dokumentes steht:

Richtig erkannt, aber eine Suchmaschine hättest du nicht einmal befragen müssen, da bereits alle relevanten Informationen im von mir verlinkten <http://de.selfhtml.org/css/formate/box_modell.htm#browser@title=Kapitel in SELFHTML> aufgeführt sind.

Was muss ich denn nun am besten tun: Die erste Zeile weglassen (soll ja erlaubt sein) oder nur den Zeilenumbruch nach der ersten Zeile weglassen, so dass "DOCTYPE" dann in die erste Zeile kommt?

Den XML-Prolog musst du zwangsläufig weglassen, wenn du den IE nicht in den Quirksmodus schicken willst.
Vor der DOCTYPE-Deklaration akzeptiert der IE lediglich Whitespaces (Leerzeichen, Tabs und Zeilenumbrüche), alles andere schickt ihn in besagten Modus.

Einen schönen Montag noch.

Gruß, Ashura

[Der Martin]

Hallo,

Kann man irgendwie sehen, in welchem Modus er ist?
Ja, am einfachsten durch die Eingabe und Bestätigung folgendes Codes in die Adresszeile:
javascript:alert(document.compatMode);

ja, vorausgesetzt, Javascript ist aktiviert. ;-)
Ich verstehe nicht, warum diese Information nicht im Eigenschaften-Dialog der jeweiligen Seite angezeigt wird. Da würde ich sowas normalerweise erwarten.

Schönen Abend auch,
 Martin

[Ashura]

Hallo Martin.

Ich verstehe nicht, warum diese Information nicht im Eigenschaften-Dialog der jeweiligen Seite angezeigt wird. Da würde ich sowas normalerweise erwarten.

Vielleicht weil man den User nicht mit solchen „unnötigen Informationen“ belästigen will?

Who knows, it's MS.

Einen schönen Montag noch.

Gruß, Ashura

[Stefan Salewski]

Die unterschiedlichen Schriftgrößen im Text- und Navigationsbereich resultieren wohl daraus, dass ich für den Navigationsbereich explizit sans-serif wähle, und der normale Text aber mit Serifen gesetzt wird. Bei Windows haben Schriften mit und ohne Serifen wohl nicht unbedingt die gleiche Größe. "font-size: 1em" oder "font-size: 100%" verändert nichts, mit "font-size: 90.0%" erhalte ich auf einem Windows2000-Testrechner ungefähr die optisch gleiche Größe. Eventuell hängt das aber auch von den installierten Schriften ab? Aber so ein optisches Finetunig mit Browser-Weiche, oder auch explizite Größenangaben in Pixel, möchte ich vermeiden. Also lasse ich es eben so, Mozilla und Konquerer stellen es ja richtig dar. Deaktivierung des IE-Quirksmodus erbrachte bei mir auch keine Verbesserung bezüglich der Schriftgrößen.

Und das mit max-width lässt sich für den IE 6 wohl nur mit beträchtlichem Aufwand realisieren, siehe
http://www.svendtofte.com/code/max_width_in_ie/
Also bleibt auch das so!

Gruß

Stefan Salewski