 Fehler / Bugs - Browserabhängig
relative Größenangaben
font-size:100%; font-size:1em;
Die Schriftgrößen sollte man heute nicht mehr absolut festlegen, damit jeder Besuche die Schriftgröße seinen Anforderungen anpassen kann. Die Einheiten für die Größenangaben sollten also nicht absolute sondern relatve sein. Sie nutzen die Angaben 'em' oder '%' .
"1em" oder "100%"
font-size:100%;
oder
font-size:1em;
Aber geau diese Größenangaben sollten sie nicht verwenden. Bei 100% hat zur Zeit der IE Probleme, bei 1em spinnt Opera, soweit mir bekannt ist. Lösung durch Verwendung der Angaben:
"1.01em" oder "100.01%"
Fehler durch Vererbung
Die einzelnen Eigenschaften können weitervererbt werden. Das ist das Grundprinzip der Cascading Stylesheets (cascadierende Gliederung, mit Vererbung nach unten).
Viele Formatierungen sind vererbbar (z.B. Schriftgröße). Legen sie für den Body die Schriftgröße mit 130% fest und für Absätze (<p>) ebenfalls Schriftgröße mit 130%, würde die Schriftgröße für Absätze nun 169% sein, weil der Absatz (Kinderelement) ja dem Body (Elternelement) untergeordnet ist. Fazit: Soll die Schriftgröße im Absatz gleich groß sein, müsste die Größenangabe für p-Elemente mit 100% festgelegt werden. Die Angabe 100% bezieht sich hier nicht mehr auf die vom Browser eingestellte Schriftgröße sonder auf die Schriftgröße des Elternelements. Bei festen Angaben (px pt) ist diese Eigenschaft unrelevant!
Beispiel Bildformatierung:
Ein ähnlicher Einsatz der CSS-Eigenschaften für Bilder.
Angaben für Rand (1), Padding (10) + Margin (10)
<img style="margin:10px;padding:10px;border:1px solid #0090E0;" ... >
Abhängig von ihrem Browser wird das Image allerdings unterschiedlich angezeigt!
Der IE ignoriert die Padding-Angaben!
Betriebssystem
Punkt oder Pixel - Windows Me und Win95 / 98
Mit Style-Sheets lassen sich Formatierungen für Text global festlegen! Manchmal macht das Ärger! Mit erstaunen mußte ich feststellen, dass mein Layout auf fremden Rechnern (ich besuche ab und an ein Internet-Cafe um das zu überprüfen), abhängig von den Einstellungen dort, schlimm aussah!
Das die beiden großen Browser die Schriften nicht gleich groß anzeigen, war mir bekannt!
Die Einstellungen kleine bzw. große Schriftarten im Betriebssystem Windows Me und Win95 / 98 war die Ursache !
| |
Während der Fehlersuche versuchte ich relative Größenangaben:
(relativ zur browsereingestellten Schriftgröße)
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.
Keine Lösung! Genauso verhielten sich Angaben wie <font size="+2">
Also endschied ich mich für eine feste Größe in Punkt. Ergebnis: keine Hilfe !
td{
font-size: 12 pt;
}
|
Die Definition der Schriftgröße in Punkt (pt) ist eigentlich eine absolute Angabe! Die Windows-Einstellung kleine Schriftarten oder große Schriftarten veränderte allerdings meine HTML-Darstellung (diese bittere Erfahrung machte ich viel zu spät). Leider fand ich bisher nirgendwo einen schriftlichen Hinweis auf diese Eigenart. Testen Sie die verschiedenen Einstellungen einmal.
|
|
Wählte ich dagegen die Einstellung Pixel (px), eigentlich keine absolute Wertangabe, gab es diesen Einfluss nicht. Ich musste allerdings den Wert erhöhen: 10 pt entspricht ca. 12 px. Bitte überprüfen Sie die Darstellung in beiden großen Browsern!
barrierefreies Webdesign
Textformatierungen für wichtige Textbereiche sollte man nicht in fixen Punkt- oder Pixelgrößen festlegen. Ohne benutzerseitige CSS-Datei hätte der Seitenbesucher nicht mehr die Möglichkeit die Schriftgröße durch Browserfunktion zu verändern.
Besser: Schriftgröße festlegen mit
font-size: 0.80em;
oder
font-size: 80%;
|
Zur Zeit arbeite ich an einer Lösung für die seitengesteuerte Schriftgrößenanpassung durch eine Kombination von CSS und JavaScript. Cookies werden abgespeichert und 'merken sich' die zuletzt benutzen Einstellungen. Demnächst mehr.
|
|
|
Home • CSS • relative Größenangaben 100 %