+ Mozilla - warum so und nicht anders?
MichaelR
- css
0 Cheatah0 MichaelR
0 Axel Richter
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
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
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
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
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
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