Jani: Problem bei der Schriftgrößendarstellung beim Mac

Hallo,

ich erstelle gerade eine Seite mit Div-Elementen und einer CSS-Datei, die die Positionierung der Div-Elemente und die Schriftformatierung steuert. Im Internet-Explorer ist die Darstellung o.k. Aber auf dem Mac wird die Schriftgrößenformatierung nicht korrekt umgesetzt. Was ich ja noch verstehen würde, wenn die Schrift einheitlich größer oder kleiner wäre. Aber je nach HTML-Element wird die Schrift völlig unterschiedlich angezeigt, auch wenn sie gleich groß ist. So wird die Schrift im h2-Tag z.B. viel kleiner dargestellt als der Fließtext im p-tag. Der Fließtext wird zu groß dargestellt, der Text in der Navigation wieder zu klein. Hat jemand eine Idee woran das liegen könnte?
Auszug aus der CSS-Datei:

a:link { font-family:Helvetica,Arial,sans-serif; color:#222222; text-decoration:none; font-size:8 pt; font-style:normal; font-weight:bold; }
a:hover { font-family:Helvetica,Arial,sans-serif; color:#cc0033; text-decoration:none; font-size:8 pt; font-style:normal; font-weight:bold; }

div.navi1 { position:absolute; left:430 px; top:218; z-index:1; }
div.navi2 { position:absolute; left:427 px; top:295; z-index:1; }
div.text { position:absolute; left:202 px; top:130; z-index:1; width:310px; text-align:right; }

h1 { font-family:Helvetica,Arial,sans-serif; font-size:10pt; font-weight:bold; color:#222222; }
h2 { font-family:Helvetica,Arial,sans-serif; font-size:9 pt; font-weight:bold; color:#222222; }
p { font-family:Helvetica,Arial,sans-serif; font:8 pt/11 pt; font-weight:normal; color:black; }

Grüße Jani

  1. ich erstelle gerade eine Seite mit Div-Elementen und einer CSS-Datei, die die Positionierung der Div-Elemente und die Schriftformatierung steuert. Im Internet-Explorer ist die Darstellung o.k. Aber auf dem Mac wird die Schriftgrößenformatierung nicht korrekt umgesetzt.

    Das liegt an den von dir verwendeten Einheiten, pt ist keine sinnvolle Einheit für die Darstellung am Monitor.

    Struppi.

    1. PX soll man aber auch nicht nehmen und mit em wollte der Mac gar nichts darstellen. Was bleibt dann?

      Jani

      1. PX soll man aber auch nicht nehmen und mit em wollte der Mac gar nichts darstellen. Was bleibt dann?

        Seit wann hat der Mac Probleme mit em?
        px ist besser als pt

        Struppi.

        1. Das Problem mit em ist im Zusammenhang mit dem Layout über Div-Boxen aufgetreten.

          Jani

          1. hi,

            Das Problem mit em ist im Zusammenhang mit dem Layout über Div-Boxen aufgetreten.

            Also hast du vermutlich dabei etwas falschgemacht ...

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. aber was? Im Internet Explorer sieht die Seite 1a aus

              Jani

              1. aber was? Im Internet Explorer sieht die Seite 1a aus

                Was ein untrügliches Zeichen für einen Fehler ist.

                Nein, im Ernst der Hinweis von Axel sollte doch eigentlich das Problem lösen, oder?

                Struppi.

                1. Wieso löst den der Hinweis das Problem? Bis jetzt weiß ich nur, die Seite auf PC mit IE korrekt angezeigt wird und auf dem Mac nicht. Den Fehler habe ich bislang nicht entdecken können. Auf jeden Fall scheint er den IE nicht zu stören. Aber was den Mac stören könnte, weiß ich immer noch nicht. Ich habe mal pt in px geändert, aber so wirklich was gebracht hat das nicht. Jani

                  1. Hi,

                    Bis jetzt weiß ich nur, die Seite auf PC mit IE korrekt angezeigt wird

                    Als korrekt kannst Du das nicht bezeichnen. Ungültige CSS-Regeln sind gemäß dem Standard zu ignorieren und im Falle der Schriftgröße hat ein standardkonformer Browser dann seine Default-Werte zu verwenden - und diese dürfen durchaus unterschiedlich sein.

                    freundliche Grüße
                    Ingo

                  2. Wieso löst den der Hinweis das Problem? Bis jetzt weiß ich nur, die Seite auf PC mit IE korrekt angezeigt wird und auf dem Mac nicht.

                    Nachdem du die Leerzeichen entfernt hast, hat sich nichts geändert?

                    Das der IE etwas falsches irgendwie versucht zu interprezieren ist bekannt, aber nicht unbedingt hilfreich.  Du hast keine richtigen Browser?
                    Du hast deinen HTML und CSS code validiert?

                    Struppi.

                    1. Ich habe noch Firefox und Netscape. Die zeigen die Schriftgröße auch anders an, aber nicht so verrückt wie der Mac. Den HTML und den CSS Code habe ich nicht validiert. Ich habe als Editor nur HomeSite 4.5.1 geht das damit und wenn ja, wie?

                      Jani

                      1. Hi,

                        Ich habe noch Firefox und Netscape. Die zeigen die Schriftgröße auch anders an, aber nicht so verrückt wie der Mac. Den HTML und den CSS Code habe ich nicht validiert.

                        Wenn Du Dein kaputtes CSS nicht korrigierst, darfst Du Dich nicht darüber beschweren, wenn Browser ihre Defaultwerte verwenden.
                        Damit Du's endlich verstehst: für die Links hast Du keine gültige Schriftgröße angegeben. Mancher Browser verwendet daher 13px, viele aber 16px.
                        für h1 hast Du ausnahmsweise eine gültige Angabe gemacht. Die ist dann natürlich je nach Voreinstellung für die Links größer oder kleiner als diese.

                        freundliche Grüße
                        Ingo

                        1. Danke Ingo für die ausführliche Erklärung, manchmal hat man ja ein Brett vor dem Kopf. Aber jetzt habe ich auch verstanden, warum die Überschrift kleiner war. An dieser Stelle auch noch mal vielen Dank für die Beiträge. Insbesondere auch an Axel und Struppi. Habe jetzt auch einen Validator zum prüfen gefunden.

                          Viele Grüße Jani

          2. Hi,

            Das Problem mit em ist im Zusammenhang mit dem Layout über Div-Boxen aufgetreten.

            Dein Problem liegt woanders. Mac hat definitiv _keine_ Probleme mit em.

            Gruesse, Joachim

            --
            Am Ende wird alles gut.
  2. Hallo,

    Auszug aus der CSS-Datei:

    a:link { font-family:Helvetica,Arial,sans-serif; color:#222222; text-decoration:none; font-size:8 pt; font-style:normal; font-weight:bold; }

    font-size:8 pt
              ^ ^Das sind _zwei_ Angaben, erwartet wird eine, also 8pt

    a:hover { font-family:Helvetica,Arial,sans-serif; color:#cc0033; text-decoration:none; font-size:8 pt; font-style:normal; font-weight:bold; }

    hier auch

    div.navi1 { position:absolute; left:430 px; top:218; z-index:1; }

    ^hier auch  ^hier fehlt die Eineit ganz.

    div.navi2 { position:absolute; left:427 px; top:295; z-index:1; }

    siehe oben

    div.text { position:absolute; left:202 px; top:130; z-index:1; width:310px; text-align:right; }

    siehe oben. Das width:310px; ist ausnahmsweise mal richtig.

    h1 { font-family:Helvetica,Arial,sans-serif; font-size:10pt; font-weight:bold; color:#222222; }

    Na Hallo! Das font-size:10pt; ist korrekt angegeben, es geht doch ;-).

    h2 { font-family:Helvetica,Arial,sans-serif; font-size:9 pt; font-weight:bold; color:#222222; }

    :-( nein, doch nicht.

    p { font-family:Helvetica,Arial,sans-serif; font:8 pt/11 pt; font-weight:normal; color:black; }

    :-((

    http://jigsaw.w3.org/css-validator/validator?text=a%3Alink+{+font-family%3AHelvetica%2CArial%2Csans-serif%3B+color%3A%23222222%3B+text-decoration%3Anone%3B+font-size%3A8+pt%3B+font-style%3Anormal%3B+font-weight%3Abold%3B+} a%3Ahover+{+font-family%3AHelvetica%2CArial%2Csans-serif%3B+color%3A%23cc0033%3B+text-decoration%3Anone%3B+font-size%3A8+pt%3B+font-style%3Anormal%3B+font-weight%3Abold%3B+} div.navi1+{+position%3Aabsolute%3B+left%3A430+px%3B+top%3A218%3B+z-index%3A1%3B+} div.navi2+{+position%3Aabsolute%3B+left%3A427+px%3B+top%3A295%3B+z-index%3A1%3B+} div.text+{+position%3Aabsolute%3B+left%3A202+px%3B+top%3A130%3B+z-index%3A1%3B+width%3A310px%3B+text-align%3Aright%3B+} h1+{+font-family%3AHelvetica%2CArial%2Csans-serif%3B+font-size%3A10pt%3B+font-weight%3Abold%3B+color%3A%23222222%3B+} h2+{+font-family%3AHelvetica%2CArial%2Csans-serif%3B+font-size%3A9+pt%3B+font-weight%3Abold%3B+color%3A%23222222%3B+} p+{+font-family%3AHelvetica%2CArial%2Csans-serif%3B+font%3A8+pt%2F11+pt%3B+font-weight%3Anormal%3B+color%3Ablack%3B+}&usermedium=all

    http://jigsaw.w3.org/css-validator/

    Den Hinweis, dass pt nicht die richtige Einheit für den Bildschirm ist, solltest Du trotzdem beherzigen. Wenn man es richtig macht, geht es auch mit em.

    viele Grüße

    Axel

  3. 你好 Jani,

    a:link { font-family:Helvetica,Arial,sans-serif; color:#222222; text-decoration:none; font-size:8 pt; font-style:normal; font-weight:bold; }

    bei 8pt kann ich übrigens genau gar nichts mehr lesen ;)

    再见,
     克里斯蒂安

    1. Hallo.

      bei 8pt kann ich übrigens genau gar nichts mehr lesen ;)

      Wo Punkt die richtige Maßeinheit wäre, empfiehlt beispielsweise DIN 676 eine Schriftgröße von sechs Punkt für die Absenderangaben. Die Post hingegen legt für elektronisch zu verarbeitende Schriftstücke Wert darauf, nicht mit Groteskschriften unter acht oder Antiquas unter zehn Punkt behelligt zu  werden.
      MfG, at