height:auto / 100% / inherit;

[Ernesto]

Hallo Forumianer,

ich steh´ mal wieder auf dem Schlauch. Gebt mir doch bitte mal einen Schups!

Der Fall ist eigentlich ganz einfach. Ich habe einen Div-Element (a) das zwei weitere Div-Elemente enthält (a1 und a2). Der (variable) Inhalt des Elementes a1 soll die Höhe von a definieren und natürlich auch von sich selbst. Zusätzlich soll es aber auch die Hhöhe von a2 bestimmen. Konstrukte wie:

<div style="position:absolute; width:300px; height:auto;">
    <div style="position:relative; height:auto">
      xxx<br>xxx<br>xxx
    </div>
    <div style="position:absolute; width:10px; top:0; right:0; hight:inherit;">
    </div>
  </div>

sagen vielleicht was gemeint ist, funktionieren aber nicht, weil offensichtlich ein "inherit", dass sich auf ein "auto" bezieht, nicht recht weiss was es tun soll :-( Wenn überhaupt, dann bekomme ich das für den Firefox hin, bei allen anderen Browsern ergeben sich immer unterschiedlich falsche Ergebnisse.

Die zwei Div-Ebenen sind ein kleiner Ausschnitt einer größeren Div-Suppe. Die Lösung müsste also "einfach" sein, weil es kompliziert von selbst noch wird.

Adieu
Eresto

[Cheatah]

Hi,

Der Fall ist eigentlich ganz einfach. Ich habe einen Div-Element (a) das zwei weitere Div-Elemente enthält (a1 und a2).

mindestens a1 sieht aus, als solle es ein <p> sein - oder mehrere. Der Gebrauch von <br> ist zumindest ein deutliches Zeichen auf eine ausbaufähige Semantik.

weil offensichtlich ein "inherit", dass sich auf ein "auto" bezieht, nicht recht weiss was es tun soll :-(

Doch, es erbt "auto", welches zur Berechnung der Höhe anhand des Elementinhalts führt. Im Subject hast Du die Lösung bereits genannt.

Wenn überhaupt, dann bekomme ich das für den Firefox hin, bei allen anderen Browsern ergeben sich immer unterschiedlich falsche Ergebnisse.

Die da wären?

Die zwei Div-Ebenen sind ein kleiner Ausschnitt einer größeren Div-Suppe.

Was mich zum allgemeinen Rat führt, die Semantik zu überarbeiten.

Die Lösung müsste also "einfach" sein, weil es kompliziert von selbst noch wird.

Ein schöner Satz, wirklich :-)

Cheatah

[MudGuard]

Hi,

weil offensichtlich ein "inherit", dass sich auf ein "auto" bezieht, nicht recht weiss was es tun soll :-(
Doch, es erbt "auto", welches zur Berechnung der Höhe anhand des Elementinhalts führt.

Wenn das der Fall wäre, wäre der Browser kaputt.

Bei inherit wird der computed value vererbt.
http://www.w3.org/TR/REC-CSS2/cascade.html#value-def-inherit

cu,
Andreas

[Cheatah]

Hi,

Bei inherit wird der computed value vererbt.

hoppla, ich hatte das Gegenteil in Erinnerung. Danke für die Korrektur.

Cheatah

[MudGuard]

Hi,

Bei inherit wird der computed value vererbt.
hoppla, ich hatte das Gegenteil in Erinnerung. Danke für die Korrektur.

Vermutung: Du hast das damit versechwelt:

Wenn das Eltern-Element auto hat für height und das Element selbst einen Prozentwert, dann läuft es auf auto  raus.

cu,
Andreas

[Cheatah]

Hi,

Wenn das Eltern-Element auto hat für height und das Element selbst einen Prozentwert, dann läuft es auf auto  raus.

jetzt komme ich völlig durcheinander. Bei <foo style="height:auto"><bar style="height:50%"/>#PCDATA</foo> wird <bar> nicht mit 50% der frisch berechneten Höhe von <foo> dargestellt?

Cheatah

[Ernesto]

Hi,

jetzt komme ich völlig durcheinander. Bei <foo style="height:auto"><bar style="height:50%"/>#PCDATA</foo> wird <bar> nicht mit 50% der frisch berechneten Höhe von <foo> dargestellt?

Doch (kann ich verbindlich sagen). Die Frage ist nur, wie foo zu seiner Höhe kommt. Wenn es seine Höhe direkt evaluieren kann, dann ist alles gut. Wenn es aber erst abwarten muss, was ein drittes Element (mit height:auto) liefert, streckt bar alle Viere von sich.

Gruß und gute Nacht
Ernesto

[MudGuard]

Hi,

Wenn das Eltern-Element auto hat für height und das Element selbst einen Prozentwert, dann läuft es auf auto  raus.
jetzt komme ich völlig durcheinander. Bei <foo style="height:auto"><bar style="height:50%"/>#PCDATA</foo> wird <bar> nicht mit 50% der frisch berechneten Höhe von <foo> dargestellt?

Nein. Wie soll das auch gehen? Die Höhe von foo hängt vom Inhalt ab. Also von der Höhe von bar. Die Höhe von bar würde aber von der Höhe von foo abhängen. Ein schöner Zirkelschluß.

Darum ist es anders definiert:
http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height
<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'.

cu,
Andreas

[Cheatah]

Hi,

Nein. Wie soll das auch gehen?

genau das war meine Frage ;-)

Die Höhe von foo hängt vom Inhalt ab. Also von der Höhe von bar.

Gut, im Originalposting wäre <bar> dann noch absolut positioniert gewesen.

Die Höhe von bar würde aber von der Höhe von foo abhängen. Ein schöner Zirkelschluß.

Darum ist es anders definiert:

Ja, so kenne ich es. Somit verstehe ich leider immer noch nicht Deine zuvor genannte Vermutung. Letztlich ist es aber auch egal, warum meine Erinnerung realitätsfern war; Hauptsache, der Bug ist gefixt.

Cheatah

[Ernesto]

Hallo Cheatah,

mindestens a1 sieht aus, als solle es ein <p> sein - oder mehrere. Der Gebrauch von <br> ist zumindest ein deutliches Zeichen auf eine ausbaufähige Semantik.

äh, ja. Der 7-Zeiler entspricht der eingekochten Div-Suppe, die mein Problem noch veranschaulcht (und ich war so stolz drauf, dass ich mit 7 Zeilen mein Problem darstellen konnte). Ich möchte meinen Besuchern auch mehr sagen als xxx<br>xxx ...

Doch, es erbt "auto", welches zur Berechnung der Höhe anhand des Elementinhalts führt. Im Subject hast Du die Lösung bereits genannt.

Das hatte ich gehofft. Wenn Du a rot einfärbst und a2 blau, dann klebt ein blauer Klecke in der rechten oberen Ecke. Ich hätte aber gerne einen blauen Strich an der rechten Seite.

Wenn überhaupt, dann bekomme ich das für den Firefox hin, bei allen anderen Browsern ergeben sich immer unterschiedlich falsche Ergebnisse.

Die da wären?

Die schwimmt noch in der Div-Suppe. Das bekomme ich um diese Uhrzeit nicht mehr für das Forum darstellbar hin (=> die Gravitation zerrt an den Augendeckeln)

Bye
Ernesto

[Cheatah]

Hi,

äh, ja. Der 7-Zeiler entspricht der eingekochten Div-Suppe, die mein Problem noch veranschaulcht (und ich war so stolz drauf, dass ich mit 7 Zeilen mein Problem darstellen konnte). Ich möchte meinen Besuchern auch mehr sagen als xxx<br>xxx ...

es ist schon klar, dass das ein symbolischer Inhalt ist. Trotzdem ist ein <br> immer ein Warnzeichen dafür, dass die Semantik insgesamt nicht stimmt. Den Hinweis halte ich für wichtig. Nun ja, Du redest ja auch selbst von einer <div>-Suppe :-)

Doch, es erbt "auto",

Siehe hierzu bitte MudGuards Korrektur.

Wenn Du a rot einfärbst und a2 blau, dann klebt ein blauer Klecke in der rechten oberen Ecke.

Bei 100% bekomme ich ein anderes Ergebnis.

Ich hätte aber gerne einen blauen Strich an der rechten Seite.

Ähm, dafür gibt es border ...?

Die schwimmt noch in der Div-Suppe. Das bekomme ich um diese Uhrzeit nicht mehr für das Forum darstellbar hin (=> die Gravitation zerrt an den Augendeckeln)

Okay, grüß die Gravitation von mir.

Cheatah

[Gunnar Bittersmann]

Cheatah,

Trotzdem ist ein <br> immer ein Warnzeichen dafür, dass die Semantik insgesamt nicht stimmt. Den Hinweis halte ich für wichtig.

Wie würdest du Gedichte/Liedtexte oder Programmcode auszeichnen? (In HTML 4.01/XHTML 1.x; das l-Element aus XHTML 2 steht noch nicht zur Debatte.)

Den Hinweis halte ich für wichtig. ;-)
Gunnar

[Cheatah]

Hi,

Wie würdest du Gedichte/Liedtexte oder Programmcode auszeichnen?

das hängt vom Kontext ab. Es böte sich beispielsweise <blockquote> oder <code> an, aber auch z.B. <pre> lässt sich bisweilen rechtfertigen. Unter Umständen mag es sogar <dl> sein - HTML ist keine bidirektional exakte Wissenschaft.

Den Hinweis halte ich für wichtig. ;-)

Klar, wenn Du mir den Zusammenhang erklären könntest ...?

Cheatah

[Gunnar Bittersmann]

Cheatah,

Wie würdest du Gedichte/Liedtexte oder Programmcode auszeichnen?
das hängt vom Kontext ab. Es böte sich beispielsweise <blockquote> oder <code> an

Grmbl, ich meinte nicht das Markup außenherum, sondern das, welches den Zeilenumbruch beschreibt:

<blockquote>  
  <p>  
    Vom Eise befreit sind Strom und Bäche  
    <br />  
    Durch des Frühlings holden, belebenden Blick  
    <br />  
    …  
  </p>  
</blockquote>

Gunnar

[Cheatah]

Hi,

Grmbl, ich meinte nicht das Markup außenherum, sondern das, welches den Zeilenumbruch beschreibt:

ach so, das hatte ich missverstanden. Nun, das ginge über die white-space-Eigenschaft (mit CSS/3.0 _richtig_ geil), oder schlimmstenfalls mit quasi beliebiger (Pseudo-)Semantik von <span> bis <ul>. Davon abgesehen bitte ich zu beachten, dass meine Behauptung _nicht_ ist, <br> sei ein Fehler, sondern dass es ein _starkes Indiz_ für einen solchen ist. Natürlich gibt es Fälle, in denen ein <br> nur mit Schmerzen vermeidbar ist (etwa auch in <address>).

Cheatah

[MudGuard]

Hi,

<div style="position:absolute; width:300px; height:auto;">
    <div style="position:relative; height:auto">
      xxx<br>xxx<br>xxx
    </div>
    <div style="position:absolute; width:10px; top:0; right:0; hight:inherit;">
    </div>
  </div>

sagen vielleicht was gemeint ist, funktionieren aber nicht, weil offensichtlich ein "inherit", dass sich auf ein "auto" bezieht, nicht recht weiss was es tun soll :-(

Du setzt nirgends inherit für height ein. Nur für eine unbekannte Eigenschaft hight.

cu,
Andreas

[Ernesto]

Hallo MudGuard,

Du setzt nirgends inherit für height ein. Nur für eine unbekannte Eigenschaft hight.

ups ... ich wollte auch schon vor einer Stunde ins Bett.
Weder mit height:inherit noch mit height:100% ändert sich was.

Bye
Ernesto

[Ernesto]

Hi noch mal,

vielleicht hat ja noch jemand einen Tipp. In der Konfiguration:

• Eltern-Div mit height:auto (enthält nur zwei Kind-Divs)
• Kind-1-Div mit height:auto (enthält den eigentlichen Content)
• Kind-2-Div mit height:100% (enthält nichts ... nur ein 6*1 Pixel
                                  großes Hintergrund-GIF, dass sich
                                  zum rechten Rahmen aufspannen soll)

hatte ich bisher Fehler im IE und Opera. In Moz, NN und FF war die Darstellung so wie ich mir das vorstellte (auch wenn mir MudGuard das nicht glaubt). Nun habe ich den Doctype von Strict auf Transitional umgestellt und jetzt gehts auch im IE. Nur Opera zeigt noch den Fehler. Die Linux- und die Mac-Kiste schmeiße ich heute nicht mehr an, so dass ich über Konqueror und Safari heute nix mehr sagen kann.

Ciao
Ernesto