Gunter: Überschriften in IE und Firefox / Opera unterschiedlich groß

Hallo zusammen,

ich benötige von Euch `mal einen Anreiz, an was mein Problem liegen kann.
Ich habe per CSS eine Überschrift erster Ordnung folgendermaßen deklariert:

h1 {
font: 1.0em Verdana, Arial, Helvetica, sans-serif #cc9966;
line-height:1.2em;
width:250px;
background-color:#fff;
margin:0;
}

...falls es jemand als Info benötigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Das Problem ist, dass im IE6 die Überschrift mit einer wesentlich kleineren Darstellung daherkommt, als es Firefox und Opera tun.
Habt ihr einen Tipp, woran das liegen kann?

Vielen Dank und Grüße
Gunter

  1. Hi Gunter!

    Habt ihr einen Tipp, woran das liegen kann?

    Ja.
    An mir, an ihr, an ihm, an denen da drüben, an denen da hinten...

    Also an allen, die einen Browser benutzen, um durch das Web zu surfen. Wie groß letztendlich eine Überschrift dargestellt wird, stelle ich mir nämlich selbst ein. Die erlaube ich noch gerade so, die Relationen zwischen verschiedenen Größen zu definieren.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
    1. Ergebnisse des W3C CSS-Validator mit Objekt: file://localhost/TextArea

      Damit Ihr CSS-Stylesheet wie gewünscht funktioniert, benötigen Sie einen korrekten Parsebaum des Dokuments. Das bedeutet, daß Sie validiertes HTML verwenden sollten.
      Warnungen:
      URI : file://localhost/TextArea

      * Zeile : 2 font-family: Es wird empfohlen, daß Sie eine generische Familie als letzte Alternative angeben
          * Zeile : 2 (Level : 1) Namen von Schriftfamilien, die Leerzeichen enthalten, sollten in (doppelte) Anführungszeichen eingeschlossen werden. Ohne Anführungszeichen werden alle Leerraumzeichen (Leerzeichen, Tabulatoren, etc.) vor und nach dem Namen ignoriert, und jede Sequenz von Leerraumzeichen innerhalb des Namens wird durch ein einzelnes Leerzeichen ersetzt. : h1
          * Zeile : 5 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : h1

      Ihr validiertes Cascading Style Sheet:

      * h1 {
                o font : 1em Verdana, Arial, Helvetica, sans-serif 204;
                o line-height : 1.2em;
                o width : 250px;
                o background-color : #fff;
                o margin : 0;
            }

  2. Versuch mal, ob es sich ändert, wenn du im body-Teil deiner css-Datei das hier einfügst:
    font-size: 62.5%;
    Das setzt die 1em auf 10px zurück.

    1. Hi,

      Versuch mal, ob es sich ändert, wenn du im body-Teil deiner css-Datei das hier einfügst:
      font-size: 62.5%;
      Das setzt die 1em auf 10px zurück.

      Wie kommst Du darauf? Das setzt die font-size auf 62.5% des Wertes, den der User als für ihn gut lesbare Größe im Browser eingestellt hat.
      Dabei können zufällig 10px rauskommen, aber auch jeder andere Wert.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Wie kommst Du darauf? Das setzt die font-size auf 62.5% des Wertes, den der User als für ihn gut lesbare Größe im Browser eingestellt hat.
        Dabei können zufällig 10px rauskommen, aber auch jeder andere Wert.

        Das ist was dran, ja. Ich habe das mal irgendwo so gelesen. Entschuldigung für die Fehlinformation.

  3. Hi,

    font: 1.0em Verdana, Arial, Helvetica, sans-serif #cc9966;

    Dir ist nicht klar, daß diese Regel ungültig ist?

    Das Problem ist, dass im IE6 die Überschrift mit einer wesentlich kleineren Darstellung daherkommt, als es Firefox und Opera tun.
    Habt ihr einen Tipp, woran das liegen kann?

    vermutlich daran, daß der IE die obige Regel netterweise für Dich korrigiert, während standardkonforme Browser sie ignorieren und stattdessen den wesentlich höheren Default-Wert verwenden.

    freundliche Grüße
    Ingo

    1. Hi,

      font: 1.0em Verdana, Arial, Helvetica, sans-serif #cc9966;
      Dir ist nicht klar, daß diese Regel ungültig ist?

      Oh man. Danke dir. Du hast Recht. Hätte natürlich "color" extra auszeichnen sollen. jetzt passt´s.

      Neuer Bookmark bei mir: http://www.1ngo.de/web/em.html  ;)

      Das Problem ist, dass im IE6 die Überschrift mit einer wesentlich kleineren Darstellung daherkommt, als es Firefox und Opera tun.
      Habt ihr einen Tipp, woran das liegen kann?
      vermutlich daran, daß der IE die obige Regel netterweise für Dich korrigiert, während standardkonforme Browser sie ignorieren und stattdessen den wesentlich höheren Default-Wert verwenden.

      freundliche Grüße
      Ingo

  4. <johan>

    Das Problem ist, dass im IE6 die Überschrift mit einer wesentlich kleineren Darstellung daherkommt, als es Firefox und Opera tun.
    Habt ihr einen Tipp, woran das liegen kann?

    Herzlichen Glückwunsch, du hast einen schwelenden Glaubenskrieg gefunden. Die Formatierung mit "em" hat nämlich trotz all ihrer semantischen Schönheit den Haken, dass sie einen gut konfigurierten Browser voraussetzt. Wenn man aber nicht nur für andere Webdesigner, sondern auch für Nichtwebdesigner schreibt, trifft man schnell auf das Problem, dass viele Browser in dem Punkt unterschiedlich eingestellt sind und die Schrift einer Seite beim einen unleserlich klein, beim anderen viel zu groß dargestellt werden kann.

    Konfrontiert man einen Webdesigner mit dem Problem, erntet man Unverständnis: "Wieso, das ist doch vollkommen korrekt" und "wenn es da ein Problem gibt, dann muss das am User und seinen Browsereinstellungen liegen". Das tut es zwar auch, aber das hilft keinem weiter. Deswegen geben viele Autoren die Größe in anderen Einheiten an (px, pt, aber auch cm etc.), was die andere Fraktion dann wieder verdammt, da man ja schließlich für einen Bildschirm und nicht einen Drucker schreibt. Und so wird dieser Krieg wohl weiter schwelen, bis wir es geschafft haben, den Internet Explorer auszurotten...

    </johan>

    --
    <signatur />
    ie:% fl:( br:< va:| ls:~ fo:{ rl:? n4:( ss:{ de:] js:( ch:] mo:| zu:)
    1. Hi,

      Die Formatierung mit "em" hat nämlich trotz all ihrer semantischen Schönheit

      Was hat das mit Semantik zu tun?

      den Haken, dass sie einen gut konfigurierten Browser voraussetzt. Wenn man aber nicht nur für andere Webdesigner, sondern auch für Nichtwebdesigner schreibt, trifft man schnell auf das Problem, dass viele Browser in dem Punkt unterschiedlich eingestellt sind und die Schrift einer Seite beim einen unleserlich klein, beim anderen viel zu groß dargestellt werden kann.

      Ohne eine Diskussion anzetteln zu wollen: natürlich kann es Unterschiede geben, aber als kritisch im Sinne von unleserlich oder wesentlich zu groß sehe ich sie nicht - vorausgesetzt man hat die Fallstricke dabei berücksichtigt.

      Und so wird dieser Krieg wohl weiter schwelen, bis wir es geschafft haben, den Internet Explorer auszurotten...

      Die Unfähigkeit des IE ist nur einer der Gründe, die für em sprechen.

      freundliche Grüße
      Ingo