pika: skalierbare Schriftgröße (em)

Hallo,

ich habe alle Größenangaben in meiner CSS-Datei auf em umgestellt (sowohl Schrift, als auch Boxen, border, Grafiken etc.) - um so ein konsistentes, gleichbleibendes aber skalierbares Layout zu realisieren.

Nun wollte ich etwas zum Konzept von em fragen, dass ich noch nicht so ganz verstanden habe;

Ein em-Wert von 1.2 bedeutet ja, dass das Element 20% größer ist als der Standard.
Aber was ist der Standard?

Bei Schriftgrößen könnte dies ja die vom Browser oder Betriebssystem voreingestellte Schriftgröße sein.
Bleibt dies dann konsistent für border / height-Angaben bei Boxen?

Und irgendwo habe ich gelesen, dass man
height: 100.01%;
in den body schreiben sollte - wenn man ansonsten nur em-Angaben benutzt.
Was bewirkt das?

  1. Ein em-Wert von 1.2 bedeutet ja, dass das Element 20% größer ist als der Standard.
    Aber was ist der Standard?

    Die Font-size des Parentelements.

    Bei Schriftgrößen könnte dies ja die vom Browser oder Betriebssystem voreingestellte Schriftgröße sein.

    Diese wird auf das html Element angewendet.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Ein em-Wert von 1.2 bedeutet ja, dass das Element 20% größer ist als der Standard.
      Aber was ist der Standard?

      Die Font-size des Parentelements.

      Bei Schriftgrößen könnte dies ja die vom Browser oder Betriebssystem voreingestellte Schriftgröße sein.

      Diese wird auf das html Element angewendet.

      Das bedeutet ich gebe beim html-Element z.B. font-size:1cm; an und alle Elemente danach richten sich danach und vergrößern/verkleinern diese Definition je nach em-Angabe?

      Ist das sinnvoll es so zu machen?

      1. Hi,

        Das bedeutet ich gebe beim html-Element z.B. font-size:1cm; an und alle Elemente danach richten sich danach und vergrößern/verkleinern diese Definition je nach em-Angabe?

        Ist das sinnvoll es so zu machen?

        Nein. cm ist keine für die Bildschirmausgabe sinnvolle Maßeinheit.

        Gebe einfach "nichts" an - dann entspricht 1em genau der Schriftgrösse, die der Nutzer als Defaultschriftgrösse eingestellt hat.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
  2. Hi,

    Und irgendwo habe ich gelesen, dass man
    height: 100.01%;

    Die 100.01% haben auch einen Sinn:

    Wie du schon sagtest muss man ja irgendwo des "Standard" angeben.
    Für den IE würde eine Deklaration von 100% reichen, was eine Standardgröße von 16px entsprechen würde.

    Opera hingegen würde einen so definierten Standard kleiner darstellen (da gibt es AFAIK einen Fehler beim berechnen der Schriftgröße -> die Schrift wird extrem klein dargestellt.

    Wenn man den Wert auf 101% ändert bringt es leider absolut nichts dafür stellt aber Safari die Schrift überproportional groß da.

    Die Variante die sich eben in letzer Zeit bewährt hat, und in allen Browsern funktioniert ist die Festlegung des Standards im <body> auf 100.01%.

    MfG
    Simon

    1. [latex]Mae  govannen![/latex]

      Für den IE würde eine Deklaration von 100% reichen, was eine Standardgröße von 16px entsprechen würde.

      Opera hingegen würde einen so definierten Standard kleiner darstellen (da gibt es AFAIK einen Fehler beim berechnen der Schriftgröße -> die Schrift wird extrem klein dargestellt.

      Nein, IE ist hier der Dummbeutel, siehe dieser Artikel auf 1ngo.de. Daher sollte man auch weiterhin diesen kleinen „Workaround“ beibehalten.

      Opera hatte diesbezüglich zwar auch mal einen Bug, dieser trat in Opera 6 auf. Da aber seit Januar 2003(!) bereits Opera 7 erschienen ist, sollte man dem in Etwa so viel Aufmerksamkeit schenken wie Netscape3 :D

      Cü,

      Kai

      --
      A workaround for an avoidable problem often adds clutter and overhead to the program which
      could have been avoided by not creating the problem in the first place.(Garrett Smith/clj)
      Foren-Stylesheet Site Selfzeug JS-Lookup
      SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?