Aquariophile: Bug in Mozilla? (height:100px;)

Hallo!

HTML 4.01 strict - jedem Blockelement kann man höhe und laenge zuordnen....

<div style="width:100%; height:100%; background-color:#FF0000;">FOOBAR</div>

In Mozilla wird das nur eine Zeile hoch

Danke
Aquariophile

  1. Hallo,

    HTML 4.01 strict - jedem Blockelement kann man höhe und laenge zuordnen....
    <div style="width:100%; height:100%; background-color:#FF0000;">FOOBAR</div>
    In Mozilla wird das nur eine Zeile hoch

    Das ist kein Bug. Das ist Konsequenz bei der Auslegung des Standards ;-))

    Wovon soll 100% berechnet werden? Vom übergeordneten Element. Das wird wahrscheinlich body sein. Wie hoch ist body? So hoch, wie der Inhalt des document. ;-)) Gut, legen wir die body-Höhe fest, auf 100%. Wovon soll 100% berechnet werden? Vom übergeordneten Element. Das ist html. Wie hoch ist html? So hoch, wie der sichtbare HTML-Inhalt. ;-)) Gut, legen wir die html-Höhe fest, auf 100%. Wovon soll 100% berechnet werden? Vom übergeordneten Element. Das ist window. Phu, geschafft. ;-))

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html style="height:100%;">
    <head>
    <title></title>
    </head>
    <body style="height:100%;">
    <div style="width:100%; height:100%; background-color:#FF0000;">FOOBAR</div>
    </body>
    </html>

    viele Grüße

    Axel

    1. Hi,

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html style="height:100%;">

      und schon falsch.

      html hat kein style-Attribut:

      <!ATTLIST HTML
        %i18n;                               -- lang, dir --
        >
      <!ENTITY % i18n
       "lang        %LanguageCode; #IMPLIED  -- language code --
        dir         (ltr|rtl)      #IMPLIED  -- direction for weak/neutral text --"
        >

      Man muß also ein style-Element verwenden oder eine ausgelagerte CSS-Datei, um CSS auf das html-Element anwenden zu können.

      cu,
      Andreas

      --
      Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
      http://mud-guard.de/? http://www.andreas-waechter.de/
      1. Hallo,

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html style="height:100%;">
        und schon falsch.

        Wieso schon? Du hast über 2/3 meiner Ausführungen gelöscht.

        html hat kein style-Attribut:

        Das ist korrekt.

        Man muß also ein style-Element verwenden oder eine ausgelagerte CSS-Datei, um CSS auf das html-Element anwenden zu können.

        Ja, daran hätte es sich aber nicht so gut erklären lassen.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <title></title>
        <style type="text/css">
        <!--
        html, body {height:100%;}
        -->
        </style>
        </head>
        <body>
        <div style="width:100%; height:100%; background-color:#FF0000;">FOOBAR</div>
        </body>
        </html>

        viele Grüße

        Axel

        1. Hi,

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title></title>
          <style type="text/css">
          <!--
          html, body {height:100%;}
          -->
          </style>
          </head>
          <body>
          <div style="width:100%; height:100%; background-color:#FF0000;">FOOBAR</div>
          </body>
          </html>

          ... und was muss ich machen, damit auch Konqueror mitspielt?

          http://salokin.de/images/height.jpg

          Gruß,

          Salokin

          1. Hallo,

            ... und was muss ich machen, damit auch Konqueror mitspielt?

            Wahrscheinlich dem body eine Höhe in px vorgeben. So ganz _klar_ ist die Regelung mit height des html-Elements nämlich nicht.

            http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property
            10.5 Content height: the 'height' property
            ...
            Values have the following meanings:
            ...
            <percentage>
            Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.

            http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
            The root of the document tree generates a box that serves as the initial containing block for subsequent layout.

            http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details
            The containing block (called the initial containing block) in which the root element lives is chosen by the user agent.

            Auf deutsch: Worauf sich %-Angaben des root-Elements beziehen, ist abhängig vom Browser.

            viele Grüße

            Axel

            1. Hi,

              Auf deutsch: Worauf sich %-Angaben des root-Elements beziehen, ist abhängig vom Browser.

              Ja klar. Und wenn ich dieselben HTML-Zeilen (inklusive CSS) per XML und XSLT komponiere, ist alles noch einmal anders, dann sieht auch Mozilla so aus wie mein Konqueror-Screenshot, siehe http://www.xmlguru.de/html/_d/forum_xml/xsl_post.php3?topic_id=62

              Ich wollte eigentlich nur wissen, ob jemand weiß, mit welchen Änderungen ich im konkreten Beispiel (!) den Browser Konqueror dazu bekomme, die Höhe des div-Elementes auf Fensterhöhe festzulegen.

              Salokin

              1. Hi,

                Und wenn ich dieselben HTML-Zeilen (inklusive CSS) per XML und XSLT komponiere, ist alles noch einmal anders, dann sieht auch Mozilla so aus wie mein Konqueror-Screenshot, siehe http://www.xmlguru.de/html/_d/forum_xml/xsl_post.php3?topic_id=62

                Allerdings hilft hier tatsächlich die Angabe "height:100%" im html-Tag:
                http://xml.salokin.de/bg/bg.xml

                Hab also wieder etwas dazugelernt (-;

                Bleibt nur noch die Konquerorfrage ...

                Salokin

                1. Hallo,

                  Bleibt nur noch die Konquerorfrage ...

                  Also, Apple Safari soll's mittlerweile können.
                  http://dhtmlkitchen.com/experiment/safari/index.html
                  Eventuell schaust Du mal nach einem Update.
                  http://konqueror.org/css/

                  viele Grüße

                  Axel