MichaelR: + Mozilla - warum so und nicht anders?

Hallo,

ein Div mit folgendem CSS

div#Test{
position: relative;
width: 50%;
height: 50%;
/* sonstiges */
}

wird im IE wie erwartet angezeigt; der Mozilla 1.3 jedoch beachtet die Höhenangabe _nicht_ - das Div ist so hoch wie der Inhalt (ein paar Worte Text).

Warum?

Weiß jemand wie man das ändern kann?

Danke + Grüße
Michael

  1. Hi,

    Warum?

    weil er - absolut korrekt - 50% der Höhe des übergeordneten Elements veranschlagt, welches an Ermangelung einer gegenteiligen Angabe nur die minimal benötigte ist. Da dies 50% der Höhe des Textes sind, was zur Darstellung nicht ausreicht, und weil die overflow-Eigenschaft standardmäßig visible ist, wird dies auf 100% erweitert, zumal Du keine max-width-Eigenschaft angegeben hast. Wie so oft ist es auch hier der IE, der eine falsche Darstellung wählt.

    Weiß jemand wie man das ändern kann?

    Wie schon ungefähr 16.777.216 mal gesagt wurde (mehr oder weniger), durch Angabe einer entsprechenden Höhe im übergeordneten Element.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi, Cheatah,

      Warum?

      weil er - absolut korrekt - 50% der Höhe des übergeordneten Elements veranschlagt, welches an Ermangelung einer gegenteiligen Angabe nur die minimal benötigte ist. Da dies 50% der Höhe des Textes sind, was zur Darstellung nicht ausreicht, und weil die overflow-Eigenschaft standardmäßig visible ist, wird dies auf 100% erweitert, zumal Du keine max-width-Eigenschaft angegeben hast. Wie so oft ist es auch hier der IE, der eine falsche Darstellung wählt.

      Weiß jemand wie man das ändern kann?

      Wie schon ungefähr 16.777.216 mal gesagt wurde (mehr oder weniger), durch Angabe einer entsprechenden Höhe im übergeordneten Element.

      Danke für die prompte Antwort.

      Grüße
      Michael

  2. Hallo,

    ein Div mit folgendem CSS

    div#Test{
    position: relative;
    width: 50%;
    height: 50%;
    /* sonstiges */
    }

    wird im IE wie erwartet angezeigt; der Mozilla 1.3 jedoch beachtet die Höhenangabe _nicht_ - das Div ist so hoch wie der Inhalt (ein paar Worte Text).

    Warum?

    50% wovon? Wie hoch ist das Element in dem das DIV existieren soll? Ist das das BODY-Element? Dann:

    html, body {height:100%; margin:0; padding:0;)

    Erklärung:
    BODY existiert im HTML-Element und orientiert sich an dessen Höhe. HTML existiert im Browser-Fenster-Anzeigebereich und orientiert sich an dessen Höhe. Wenn Margins und/oder Paddings im BODY existieren, wird height:100% um diese Werte _höher_ als der Browser-Fenster-Anzeigebereich.

    viele Grüße

    Axel

    1. Hallo,

      ein Div mit folgendem CSS

      div#Test{
      position: relative;
      width: 50%;
      height: 50%;
      /* sonstiges */
      }

      wird im IE wie erwartet angezeigt; der Mozilla 1.3 jedoch beachtet die Höhenangabe _nicht_ - das Div ist so hoch wie der Inhalt (ein paar Worte Text).

      Warum?

      50% wovon? Wie hoch ist das Element in dem das DIV existieren soll? Ist das das BODY-Element? Dann:

      html, body {height:100%; margin:0; padding:0;)

      Erklärung:
      BODY existiert im HTML-Element und orientiert sich an dessen Höhe. HTML existiert im Browser-Fenster-Anzeigebereich und orientiert sich an dessen Höhe. Wenn Margins und/oder Paddings im BODY existieren, wird height:100% um diese Werte _höher_ als der Browser-Fenster-Anzeigebereich.

      Das div#Test befindet sich in einem Eltern-Div, das allerdings keinerlei CSS-Eigenschaften explizit zugewiesen hat; dieses Eltern-Div ist Kindelement von <body>, welches rechts, links und oben einen margin von 5% hat.

      Wenn ich Dich richtig verstanden hab', dann erben die Kindelemente die Höhenangaben genauso wie andere Eigenschaften auch? Dann müsste doch eigentlich das betreffende div die 50% Höhe am Eltern-Element ausrichten und damit ja eigentlich größer sein, als es dargestellt wird???

      Verwirrte Grüße
      Michael

      1. Hi,

        Wenn ich Dich richtig verstanden hab', dann erben die Kindelemente die Höhenangaben genauso wie andere Eigenschaften auch?

        Nein. Initial-Value von height ist auto (also im Normalfall so hoch wie durch den Inhalt vorgegeben, kann aber auch von anderen Dingen abhängen), nicht inherit (vom Elternelement erben).

        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/ http://www.helpers.de/