nicht angemeldet
IE6 und height bzw angezeigte höhe eines div
0 
Der Martin
IE6 und height bzw angezeigte höhe eines div
Gunnar BittersmannIE6 zeigt ein div nur eine zeile hoch, iceweasel (FF) und opera9.1 zeigen höhe wie in css definiert: ca.80% viewport höhe mit unterschiedlich hohem leerem streifen oben und unten:
css:
#inhalt { position: absolute; top: 7em; background: #FBEDC1; width: 100%; height: 80%; color: #ffffff; }
index.html
<body>
<div id=inhalt>inhalt</div>
</body>
Wo liegt hier der fehler?
-
Hallo,
IE6 zeigt ein div nur eine zeile hoch, iceweasel (FF) und opera9.1 zeigen höhe wie in css definiert: ca.80% viewport höhe mit unterschiedlich hohem leerem streifen oben und unten:
auch wenn es seltsam klingt: Das kommt mir so vor, als mache es der IE ausnahmsweise richtig(er). Welche Höhe hat denn das body-Element? Und welche Höhe hat dessen Vorfahrenelement? Und wieviel ist 80% davon?
index.html
<body>
<div id=inhalt>inhalt</div>
</body>Im Quirksmode? Raten IE, FF und Opera vielleicht unterschiedlich, wenn die Vorgaben nicht eindeutig sind?
So long,
Martin--
Wenn du beim Kochen etwas heißes Wasser übrig hast, friere es ein.
Heißes Wasser kann man immer gebrauchen.-
Hallo,
IE6 zeigt ein div nur eine zeile hoch, iceweasel (FF) und opera9.1 zeigen höhe wie in css definiert: ca.80% viewport höhe mit unterschiedlich hohem leerem streifen oben und unten:
auch wenn es seltsam klingt: Das kommt mir so vor, als mache es der IE ausnahmsweise richtig(er). Welche Höhe hat denn das body-Element? Und welche Höhe hat dessen Vorfahrenelement? Und wieviel ist 80% davon?
index.html
<body>
<div id=inhalt>inhalt</div>
</body>Im Quirksmode? Raten IE, FF und Opera vielleicht unterschiedlich, wenn die Vorgaben nicht eindeutig sind?
So long,
MartinOb ich den quirksmode verwende weiß ich nicht, wenn ja, dann unabsichtlich, fall ich dazu intentional etwas gemacht haben müßte, dann sicher nein.
Ok, es war keine body- oder html-höhe definiert. Nun habe ich 100% für den body definiert, damit klappt das wohl, verstehen tut ich es leider nicht, weil es ja in der breite auch ohne definition für den body funktioniert.
-
Hello out there!
Hallo,
[schnipp]
So long,
MartinSei bitte kein Vollquottel! [Wikipedia: Fullquote]
Ob ich den quirksmode verwende weiß ich nicht
„Alle modernen Browser richten den Darstellungsmodus nach der Dokumenttypdefinition (Doctype) im HTML-Quellcode. Fehlt die Doctype-Angabe, wird der Quirks-Modus verwendet.“ [Wikipedia: Quirks-Modus]
Ok, es war keine body- oder html-höhe definiert. Nun habe ich 100% für den body definiert
Und für 'html'?
verstehen tut ich es leider nicht, weil es ja in der breite auch ohne definition für den body funktioniert.
Weil ohne Angabe – also beim Wert 'auto' – die Berechnung der Breite [CSS2 §10.3.3] anders erfolgt als die der Höhe [CSS2 §10.6.3].
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Weil ohne Angabe – also beim Wert 'auto' – die Berechnung der Breite [CSS2 §10.3.3] anders erfolgt als die der Höhe [CSS2 §10.6.3].
See ya up the road,
GunnarDanke für die links. Zwar weiß ich nicht wie oft ich dies durchlesen muß, bis mir wirklich klar wird, wie ich mir das vorzustellen habe. Ich habe ständig schwierigkeiten mir das seitenlayout aus boxen zusammenzubauen. Irgendwie habe ich noch kein wirklich handhabbares bild gefunden, mit dem ich mir dies gedanklich klar strukturiern kann. Ich greife immer wieder auf die vorstellung einer tabelle zurück und scheitere vielleicht auch gerasde deshalb ständig mit meinen plazierungsversuchen. Nur ich weiß nicht, wie ich mir das sonst vorstellen sollte?
Und weil es hier im thread angesprochen war: Ich kann mir unter dem html element visuell überhaupt nichts vorstellen, schon gar nicht im verhältnis zum body. Soweit man ( wie ich ) keine frames verwendet ist doch visuell body-element = html-element. Ich kann mir schon unter <body height=100%> nichts vorstellen. 100% von was? Vom html-element? Was stellt den <html height=100%> dar? Was wäre <html height=50%>
Was muß ich grundsätzlich tun, wenn ich ein einfaches design mit kopf, seitennavigation und inhalt so aufbauen will, dass egal was ich ich ins inhaltselement packe die inhaltsbox und die navi box in der höhe ( bzw tiefe) immer auf gleichem niveau abschließen? Alles darf wegscrollen, kein javascript und keine hacks für IE?
Da beginnen bereits meine probleme.
-
Hello out there!
Ich greife immer wieder auf die vorstellung einer tabelle zurück und scheitere vielleicht auch gerasde deshalb ständig mit meinen plazierungsversuchen.
Das Denken in Tabellen kann in der Tat äußerst hinderlich sein.
Nur ich weiß nicht, wie ich mir das sonst vorstellen sollte?
Absolute Positionierung wäre wie eine Pinnwand, an die du Zettel, die unterschiedliche Größe haben können, anheftest. Welche dabei vollständig sichtbar sind und welche verdeckt, regelt der z-Index.
Floatende Boxen sind wie Zettel, die du so weit wie möglich links (bzw. rechts) oben anpinnst, ohne dass sie sich überlappen. Passt der nächste Zettel nicht neben (bzw. zwischen) die schon vorhandenen, kommt er halt darunter.
Und weil es hier im thread angesprochen war: Ich kann mir unter dem html element visuell überhaupt nichts vorstellen
Das ist das Wurzelelement des Dokuments; die äußerste Box im Viewport.
schon gar nicht im verhältnis zum body.
'body' ist ein Kind von 'html'; dessen Box liegt in der von 'html'-Box (sofern nicht aus dem Fluss genommen), wobei auch beide dieselbe Größe haben können.
Soweit man ( wie ich ) keine frames verwendet ist doch visuell body-element = html-element.
Nein, nicht unbedingt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Lorem ipsum</title> <style type="text/css"> [code lang=css] html { background: black; } head { display: block; background: lightblue; } head * { display: none; } head title { display: block; } body { background: orange; height: 100%; }</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>[/code]Ich kann mir schon unter <body height=100%> nichts vorstellen.
Das solltest du auch _nie_ verwenden. Für _sämtliche_ Darstellungsangaben ist CSS da, nicht veraltete HTML-Attribute.
Also bitte im Stylesheet
body {height: 100%}100% von was? Vom html-element?
Geanu.
Was stellt den <html height=100%> dar?
Siehe oben.
html {height: 100%}gibt an, dass die 'html'-Box so hoch ist wie der Viewport.Was wäre <html height=50%>
Bei
html {height: 50%}ist die Box eben halb so hoch wie der Viewport. Wobei eine Hintergrundfarbe dennoch (evlt.?) den gesamten Viewport ausfüllt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Lorem ipsum</title> <style type="text/css"> [code lang=css] html { background: black; border: 3px solid white; height: 50%; } head { display: block; background: lightblue; } head * { display: none; } head title { display: block; } body { background: orange; }</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>[/code]See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)-
Oje, wenn man nen beitrag nicht abschickt, kann er auch nicht ankommen, merke eben erst, dass ich wohl wieder mal das nirvana beglückt habe:
Danke an Gunnar, deine erklärungen und beispiele waren sehr erhellend, obwohl ich davon ausgehe, dass das beispiel mit unterschiedlich großem html- und body- element mehr ein proof-of-concept als ernst gemeinter rat darstellt. Neue einsichten hat es in jedem fall gewährt. Auch das pinnwand-bild hilft mir, ich brauche genau derart bilder, die mir abstrakte regeln, die sich in der summierung verknäulen, anschaulich machen. Besonderen dank dafür.
Zwischenzeitlich ist mir auch klar geworden, dass meine mangelhaften erfolge mit boxen auch auf ein falsches verständnis des box-modells zurückzuführen waren. Der IE fehler war mir im prinzip klar, nur habe ich darüber gar nicht richtig wahrgenommen, wie das boxmodell standardmäßig funktioniert. Ich bin nun alles andere als ein freund redmonder software, aber das was hier als boxmodellfehler des IE gehandelt wird, ist meiner (anfänger-) meinung nach das anschaulichere konzept: width = boxgröße bis bordermitte, padding nach innen, margin nach aussen, border nach innen. Das wäre dann wie bei jedem bilderrahmen mit abstand zu anderen bildern, holzrahmen, passepartout und inhalt. Und breite ist eben das was physisch eine einheit bildet, das wäre alles innerhalb der aussenrändern das rahmens/borders. An wen muß ich mich wenden um das vorzuschlagen ( mal ganz unschüchtern frag?)
Das summenmodell wie es jetzt ist, ist zu den nachbarboxen schwieriger zu handhaben, weil man zu keinem zeitpunkt die geammtgröße vorgeben kann, sondern sich diese immer nur ergibt. Tja, hätt' mich einer fragen sollen ... ;-)-
Hello out there!
obwohl ich davon ausgehe, dass das beispiel mit unterschiedlich großem html- und body- element mehr ein proof-of-concept als ernst gemeinter rat darstellt.
Ja, klar.
[…] aber das was hier als boxmodellfehler des IE gehandelt wird, ist meiner (anfänger-) meinung nach das anschaulichere konzept
ACK. icke]
An wen muß ich mich wenden um das vorzuschlagen ( mal ganz unschüchtern frag?)
Ans W3C. Aber der Vorschlag ist nicht mehr nötig; in CSS3 ist das bereits vorgesehen. [ebenda]
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
-
-