em und px nicht vereinbar?

[Eddie]

Hallo allerseits,

ich möchte die Schrift im Hauptbereich meiner Seite in "em" definieren. Alle anderen Schriften jedoch in "px" (also z.B. die Navigationsleiste, etc.).
Da die meisten Schriftgroessen 12px betragen sollen, bietet sich ein einmaliger Eintrag für body an. Problem: danach funktioniert "em" nicht mehr. Mache ich da was falsch?

=======
body{font-size:12px;}
div.main{font-size:1.1em;} /* funzt nicht */

Danke für eure Hilfe,
Eddie

[MudGuard]

Hi,

=======
body{font-size:12px;}
div.main{font-size:1.1em;} /* funzt nicht */

Definiere "funzt nicht".

12px * 1.1 = 13.2px ==> 13px.
em bezieht sich immer auf die Schriftgröße des Elternelements. Wenn kein Elternelement mehr vorhanden ist, auf die Browser-Voreinstellung.
Wenn Du für body die Schriftgröße in px festlegst, ist kein Weg mehr frei zum Erben der Browser-Voreinstellung.

Ich versteh sowieso nicht, warum Du Pixel mit em mischen willst...

cu,
Andreas

[Eddie]

Hallo Andreas,

Definiere "funzt nicht".

Wenn ich die Schriftart mit meinem Browser auf "riesig" stelle, tut sich garnichts.

Wenn Du für body die Schriftgröße in px festlegst, ist kein Weg mehr frei zum Erben der Browser-Voreinstellung.

Und "Browser-Voreinstellung" meint auch die obige "riesig"-Einstellung? Wenn das so waere, dann waer mir jetzt einiges klarer...

Danke für eure Hilfe,
Eddie

[MudGuard]

Hi,

Definiere "funzt nicht".
Wenn ich die Schriftart mit meinem Browser auf "riesig" stelle, tut sich garnichts.

Klar, der IE verändert Pixelgrößen nicht.
Im body bleibt also die Schriftgröße konstant.
Also bleibt auch die davon abhängige Schriftgröße im div konstant.

Wenn Du für body die Schriftgröße in px festlegst, ist kein Weg mehr frei zum Erben der Browser-Voreinstellung.
Und "Browser-Voreinstellung" meint auch die obige "riesig"-Einstellung? Wenn das so waere, dann waer mir jetzt einiges klarer...

Richtig.

cu,
Andreas

[Ingo Turski]

Hi,

Alle anderen Schriften jedoch in "px" (also z.B. die Navigationsleiste, etc.).

dann definiere _diese_ in px und nicht body. wenn die navigation in einem DIV steckt, sollte das doch kein großer aufwand sein, oder?

freundliche Grüße
Ingo

[Eddie]

Hallo Ingo,

dann definiere _diese_ in px und nicht body. wenn die navigation in einem DIV steckt, sollte das doch kein großer aufwand sein, oder?

Doch, es ist ja nicht nur die Navigation, sondern auch 1000 andere Elemente, z.B. alle Beschriftungselemente, die irgendwo zum Einsatz kommen.
Sprich ich hab in meiner CSS-Datei folgendes stehen:

• 1000 Mal "font-size:12px;"
• 5 Mal "font-size:Xem;" (inkl. im Body)
  Lieber waer mir aber:
• 1 Mal "font-size:12px;" (naemlich. im Body)
• 4 Mal "font-size:Xem;"

Danke für eure Hilfe,
Eddie

[Ingo Turski]

Hi,

• 1000 Mal "font-size:12px;"

das ist vermutlich 990 mal zuviel. Du solltest die Vererbung stärker nutzen, dann kannst Du Dein CSS bestimmt bedeutend abspecken. Außerdem kannst Du Elemente, die häufig dieselben Definitionen bekommen, pauschal und die Ausnahmen über Klassen anders definieren.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Eddie

... Alle anderen Schriften jedoch in "px" (also z.B. die Navigationsleiste, etc.).

Damit diese im IE nicht scaliert werden?
Damit dir nicht auffällt, wie die Seite bei vergrößerter Schrift in anderen Browsern aussieht?
Oder soll die Seite nur für IE-Nutzer sein?

MFG
Detlef

[Shaddai]

Hallo,

Damit diese im IE nicht scaliert werden?

Dazu fallen mir spontan zwei E-Mails ein, die ich in der letzten Zeit erhielt. Beide stammen von Nutzern des MSIE, beide beklagten, daß die Schrift auf meiner Netzseite "viel zu klein" sei. Ich schließe daraus und aus früheren Erfahrungen, daß die meisten gemeinen Surfer (und die nutzen sowohl den IE als auch die Bildschirmuflösung, die beim Erststart ihres Rechners eingestellt war) gar keine Ahnung davon haben, daß - und vor allem nicht *wie* - man den Schriftgrad selbst wählen kann.

Ich tendiere dazu, dem IE, und *nur* dem IE, eine Schriftgröße für den "body" von 14px aufzuoktroyieren. Wenn jemand eine größere Schrift will, bietet der IE bzw. Windows diese Möglichkeit durchaus. Außerdem besteht die Option, einen funktionierenden Browser zu installieren.

Gruß,
Shaddai

[Detlef G.]

Hallo Shaddai

Dazu fallen mir spontan zwei E-Mails ein, die ich in der letzten Zeit erhielt. Beide stammen von Nutzern des MSIE, beide beklagten, daß die Schrift auf meiner Netzseite "viel zu klein" sei.

Meiner Mutter und mir, wenn ich ein bisschen müde bin, sind 12px auch zu klein.

Ich schließe daraus und aus früheren Erfahrungen, daß die meisten gemeinen Surfer (und die nutzen sowohl den IE als auch die Bildschirmuflösung, die beim Erststart ihres Rechners eingestellt war) gar keine Ahnung davon haben, daß - und vor allem nicht *wie* - man den Schriftgrad selbst wählen kann.

Ja den Trick, wie man beim IE trotz px-Angaben die Schrift größer bekommt, kennen die wenigsten.

Ich tendiere dazu, dem IE, und *nur* dem IE, eine Schriftgröße für den "body" von 14px aufzuoktroyieren.

Versuch es doch einmal mit 101%. Das stört nicht und bringt den IE dazu die Größenunterschiede nicht zu übertreiben.

Wenn jemand eine größere Schrift will, bietet der IE bzw. Windows diese Möglichkeit durchaus.

sieh oben.

Außerdem besteht die Option, einen funktionierenden Browser zu installieren.

Welcher Durchschnittsnutzer weiß das, bzw. wie bringst du ihm bei, dass es an seinem supertollen IE liegt und nicht an dir.

Worauf ich eigentlich mit meinen Fragen hinauswollte ist das Aussehen deiner Seite im Mozilla bei z.B. 200% Schriftgröße. Außerdem erscheint bei 800x600 Pixel Fenstergröße bereits der vertikale Scrollbalken.

MFG
Detlef

[Shaddai]

Hi,

Meiner Mutter und mir, wenn ich ein bisschen müde bin, sind 12px auch zu klein.

Ich verwende 1em und nichts darunter, die Schriftgröße auf Deinem oder Deiner Mutter Bildschirm liegt mithin nicht in meiner Verantwortung.

Ja den Trick, wie man beim IE trotz px-Angaben die Schrift größer bekommt, kennen die wenigsten.

Um diesen "Trick" ging es mir nicht, ich verwende schließlich keine px-Angaben für Text. Wirklich erschütternd ist allerdings, daß viele Nutzer nicht einmal wissen, daß sie im IE überhaupt den Schriftgrad bestimmen können. Einer derer, die mir schrieben, hatte in seinem IE als Schriftgrad "Klein" eingestellt, ohne dies zu wissen. Bei ihm entsprach das etwa 8px und war mithin unlesbar.

Außerdem besteht die Option, einen funktionierenden Browser zu installieren.

Welcher Durchschnittsnutzer weiß das, bzw. wie bringst du ihm bei, dass es an seinem supertollen IE liegt und nicht an dir.

Ich wettere bei jeder sich bietenden Gelegenheit gegen den IE, mehr kann ich als gemeiner Netzseitenautor leider nicht tun. Aber ich glaube, mehr muß ich auch nicht tun.

Worauf ich eigentlich mit meinen Fragen hinauswollte ist das Aussehen deiner Seite im Mozilla bei z.B. 200% Schriftgröße. Außerdem erscheint bei 800x600 Pixel Fenstergröße bereits der vertikale Scrollbalken.

Bei mir sehe ich bei 800x600 auch bei voreingesteller Schriftgröße von 16px noch keine *horizontale* Bildlaufleiste. Eine vertikale schon, aber wo ist da das Problem?

Gruß,
Shaddai

[Detlef G.]

Hallo Shaddai

Bei mir sehe ich bei 800x600 auch bei voreingesteller Schriftgröße von 16px noch keine *horizontale* Bildlaufleiste. Eine vertikale schon, aber wo ist da das Problem?

Entschuldigung, ich lag total daneben.
1. Ich antwortete dir und meinte Eddie und http://www.umdiewelt.de.
2. Natürlich meinte ich dort die horizontale Bildlaufleiste.

MFG
Detlef

[Siechfred]

Hallo Detlef.

Schau dir diese Seite (Entwurfsstadium) mal mit einem IE an:
http://www.siechfreds-welt.de/uebersicht.html

Und dann mit einem modernen Browser ;-)

Fazit für mich: man kommt beim IE um eine px-Angabe nicht herum (die CSS-Datei formie.css habe ich für diese Demonstration vorübergehend entfernt).

Grüße
Siechfred

[Detlef G.]

Hallo Siechfred

Schau dir diese Seite (Entwurfsstadium) mal mit einem IE an:

Na gut, dann starte ich das Ding mal.

http://www.siechfreds-welt.de/uebersicht.html

Erschütternd!
Ich glaube aber noch nicht wirklich, dass nur eine px-Angabe diese Fehler verhindert.

MFG
Detlef

[Shaddai]

Hi,

http://www.siechfreds-welt.de/uebersicht.html

Erschütternd!
Ich glaube aber noch nicht wirklich, dass nur eine px-Angabe diese Fehler verhindert.

Steht Dir frei, den Quelltext einzusehen.

Gruß,
Shaddai

[Siechfred]

Hallo Detlef.

http://www.siechfreds-welt.de/uebersicht.html
Erschütternd!
Ich glaube aber noch nicht wirklich, dass nur eine px-Angabe diese Fehler verhindert.

Nein, das nicht. Die formie.css sieht so aus:

body, h2 {
  font-size:16px;
}
h1 {
  letter-spacing:2px;
  font-size:30px;
}
h2 {
  letter-spacing:2px;
}
.text, .spalte, h3 {
  font-size:11px;
}
.spalte {
  height:30em;
  width:17em;
}
.info {
  font-size:9px;
}

Grüße
Siechfred

[Detlef G.]

Hallo Siechfred

Ich glaube aber noch nicht wirklich, dass nur eine px-Angabe diese Fehler verhindert.

Nein, das nicht. Die formie.css sieht so aus:
...

Gemeint hatte ich:
Ich glaube aber noch nicht wirklich, dass nur Angaben in px diese Fehler verhindern.

Der IE macht bei dieser Seite ja wirklich eine totale Nonsens-Schriftgößen-Vererbung, die ich nicht wirklich nachvollziehen kann.
Dagegen helfen nur Angaben der Schriftgrößen in px.

Wirklich?

Nein!

Der IE spinnt, wenn er erst vergößern und dann davon ausgehend wieder verkleinern soll.

Dagegen dürfte aber folgendes helfen:
Die Schriftgröße des Bodys auf 101% setzen und dann den Rest davon ausgehend festlegen.

Versuch es mal so (nur grob, noch nicht ausgefeilt): http://d-graff.de/demos/selfhtml/siechfred/uebersicht.html

MFG
Detlef

[Siechfred]

Hallo Detlef.

Ich glaube aber noch nicht wirklich, dass nur Angaben in px diese Fehler verhindern.

Das war mein ursprünglicher Ansatz.

Der IE macht bei dieser Seite ja wirklich eine totale Nonsens-Schriftgößen-Vererbung, die ich nicht wirklich nachvollziehen kann.

Jo, wenn's nicht so traurig wäre, könnte man glatt drüber lachen.

Versuch es mal so (nur grob, noch nicht ausgefeilt): http://d-graff.de/demos/selfhtml/siechfred/uebersicht.html

Danke für den Tipp, werde es mal testen. Btw, die gefloateten div in der zweiten Zeile sind noch etwas verschoben, mal sehen, woran das nun wieder liegen kann.

Grüße
Siechfred

[Ingo Turski]

Hi,

http://www.siechfreds-welt.de/uebersicht.html

body {font-size:1.2em;} ist auch denkbar ungünstig. Du brauchst wohl noch nichtmal 101% zu nehmen, sondern 120% dürften auch schon reichen. Merke: em != % und Abweichungen sind vorprogrammiert, wenn es kein übergeordnetes Element mit einer nicht in em angegebenen font-size gibt.

freundliche Grüße
Ingo

[MudGuard]

Hi,

http://www.siechfreds-welt.de/uebersicht.html
body {font-size:1.2em;} ist auch denkbar ungünstig. Du brauchst wohl noch nichtmal 101% zu nehmen, sondern 120% dürften auch schon reichen. Merke: em != % und Abweichungen sind vorprogrammiert, wenn es kein übergeordnetes Element mit einer nicht in em angegebenen font-size gibt.

Aus http://www.w3.org/TR/REC-CSS2/fonts.html#propdef-font-size:
<percentage>
    A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets.

Aus <>:
The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

em wie hier auf font-size angewendet  gibt den Faktor an, der auf die Schriftgröße des Elternelements angewendet wird.
Ein Prozentwert bei font-size dagegen gibt den Faktor an, der auf die Schriftgröße des Elternelements angewendet wird.

Hm. Wo ist da der Unterschied?
Einen Unterschied zwischen Prozent-Angabe und Angabe in em gibt es, aber nicht bei font-size, sondern bei anderen Längenangaben, da sich dort die Prozentangabe nicht immer auf die Schriftgröße bezieht.

Aber bei font-size ist es egal, ob man einen Prozentwert oder einen em-Wert angibt - sofern natürlich der numerische Wert identisch ist (120% = 1.2em)

cu,
Andreas

[Detlef G.]

Hallo MudGuard

Aber bei font-size ist es egal, ob man einen Prozentwert oder einen em-Wert angibt - sofern natürlich der numerische Wert identisch ist (120% = 1.2em)

Ich verwende aus Gründen der Übersichtlichkeit em bei Schriftgrößen. Damit sind dann alle Angaben, die sich auf die Schriftgrößen beziehen, in der selben Einheit, und direkt vergleichbar.
Eine Ausnahme dabei ist die Schriftgröße für body, die ich immer auf 101% setze. Bei nennenswert von 100% abweichenden Angaben rechnet der IE oftmals falsch (Siechfreds Seite z.B. sah mit 120% genauso unmöglich wie mit 1.2em aus) und bei genau 100% haben bestimmte Operaversionen einen Bug.

MFG
Detlef

[Ingo Turski]

Hi,

em wie hier auf font-size angewendet  gibt den Faktor an, der auf die Schriftgröße des Elternelements angewendet wird.
Ein Prozentwert bei font-size dagegen gibt den Faktor an, der auf die Schriftgröße des Elternelements angewendet wird.

Hm. Wo ist da der Unterschied?

der Unterschied liegt zum einen im Fehlverhalten einiger Browser (siehe das IE-Problem beim angeführten Beispiel) und zum anderen bei der Verwendung von EM für Längenangaben; hier sollte ein Bezug zu einem übergeordneten Element (am praktischten wohl body) bestehen, dessen font-size in % definiert ist. Siehe vielleicht auch nochmal http://www.1ngo.de/web/em.html hierzu.

freundliche Grüße
Ingo

[Eddie]

Hallo allerseits,

danke für Eure Hilfe, bin gerade mit dem "Redesign" fertig geworden.

Eddie