padding vs. Firefox

[willie.de]

Hallö ins Forum,

ich verzweifle soeben am inneren Abstand eines DIVs, der sich nicht einstellen will. Vielleicht kann mir ja jemand nen Tipp geben oder mal wieder den Kopf waschen ;-)

Um das Problem kurz anzureißen ein paar Zeilen Code:
   html,body { height:100%; margin:0; padding:0; }
   html { margin-bottom:2em; }

div.content { padding:0 20px 5em 0; height:100%; }
/* selbst die nächsten 2 Zeilen lassen FF und Mozilla kalt */
   div[class="content"] { margin-bottom:50em; }
   html { padding-bottom:50em; }

Mein Problem ist, dass Text von einem kleinen Menü am unteren Bildrand verdeckt bleibt, wenn (ohne unteren Abstand) bis zum Ende der Seite gescrollt wird.

Sogar eine Angabe
   html,body { margin-bottom:50em; padding-bottom:50em; }
lässt den FF1.5 kalt, während OP7, IE6, NN7 und der gute alte Mozilla (verschiedene) Abstände zeigen.

Das Problem gibts life und in Farbe hier anzusehen: http://ox-production.de/was.html.

Danke für Unterstützung und
Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Mein Problem ist, dass Text von einem kleinen Menü am unteren Bildrand verdeckt bleibt, wenn (ohne unteren Abstand) bis zum Ende der Seite gescrollt wird.

Gib div.content mal einen Border, damit du siehst, wie groß er überhaupt
ist.

Auf Wiederlesen
Detlef

[willie.de]

Hallo, Detlef G.,

Gib div.content mal einen Border, damit du siehst, wie groß er überhaupt
ist.

Gesagt, getan. Hab auch gleich standardkonforme width-Angaben gemacht.

Probiere bitte nochmal http://ox-production.de/was.html (bitte nur vom Forum aus, ist von $_SERVER['HTTP_REFERER'] abhängig)! Ich hab div.content red und div.img yellow gesetzt.

Ich befürchte, dass FF da tatsächlich ein Problem mit floatenden Bereichen hat. Falls du eine bessere Erklärung hast oder gar eine Lösung: Danke!

Grüße aus Leipzig
willie

[willie.de]

Hallö ins Forum,

Ich befürchte, dass FF da tatsächlich ein Problem mit floatenden Bereichen hat.

Habe jetzt dem div.img mal ne Höhe verpasst (10em). Jawoll, der FF lässt einfach alles darüber hinaus laufen. Mit nem
   overflow:visible;
komm ich aber auch nicht weiter. Bleibt halt wie 'auto'. Jetzt hab ich
   overflow:scroll;
gesetzt. Und ist es deutlich zu erkennen: Der Bereich wird einfach aus dem Elternelement "heraus gerechnet".

Und nun?!

Danke für Unterstützung und
Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Habe jetzt dem div.img mal ne Höhe verpasst (10em). Jawoll, der FF lässt einfach alles darüber hinaus laufen.

Selbstverständlich, er ist ja kein IE.

Schau mal bei Overflow: the 'overflow' property, dort steht:

Initial:  visible

visible
    This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

oder bei overflow (Elementbereich mit übergroßem Inhalt):

visible = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.

Auf Wiederlesen
Detlef

[willie.de]

Hallö, Detlef G.,

Schau mal bei Overflow: the 'overflow' property, dort steht:

Initial:  visible
    This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

Meine Bilder bzw. Links haben doch aber klare Maße. Und der div.img hat keine Höhe; sie sollte auf 'auto' sein. http://ox-production.de/was.html

Verhält sich overflow bei Angaben zu float anders als normal? _Sollen_ gefloatetet Bereiche aus dem Elternelement herausragen? Eigentlich müssten sie doch Inhalt des Elementes sein?!

(Ich kann erst morgen wieder antworten...)

Danke für Unterstützung und
Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Meine Bilder bzw. Links haben doch aber klare Maße. Und der div.img hat keine Höhe; sie sollte auf 'auto' sein.

Vorhin hatte div.img height:10em und overflow:scroll.

Eigentlich müssten sie doch Inhalt des Elementes sein?!

Sie werden durch float aus dem Elementfluss genommen.

Auf Wiederlesen
Detlef

[willie.de]

Hallö nochmal,

Vorhin hatte div.img height:10em und overflow:scroll.

Hatt ich später und testhalber eingefügt.

Sie werden durch float aus dem Elementfluss genommen.

Könnte mir das _bitte_ mal jemand genau erklären? Wie schon in meiner anderen Antwort: Der umschließende div.content ist so hoch, dass der Inhalt des div.img hinein passt. Wieso passt dieser Inhalt nicht in div.img selbst?

Danke für Unterstützung und
Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Sie werden durch float aus dem Elementfluss genommen.
Könnte mir das _bitte_ mal jemand genau erklären?

Das bedeutet, dass gefloatete Elemente nur Inlineelemente und Text
beeinflussen. Sie haben keinen Einfluss auf die Größe normaler Blockelemente,
auch nicht auf das sie umgebende. Welche Möglichkeiten gibt, dass dies doch
geschieht hast du ja bereits überflogen.

Wie schon in meiner anderen Antwort: Der umschließende div.content ist so hoch, dass der Inhalt des div.img hinein passt. Wieso passt dieser Inhalt nicht in div.img selbst?

Weil der Inhalt von div.img gefloatet ist und damit keinen Einfluss aud die
Größe von div.img hat.
Der umschließende div.content wird entsprechend ausgedehnt, weil unterhalb
von div.img noch weiteres steht, z.B.:
<h2 class="clear"><a href="...">DVD hier bestellen!</a></h2>

und im CSS dazu:
.clear { clear:both; }

Dadurch wird jedes vorhergehende Float aufgehoben.

Lies mal dass, wass du heute Früh nur überflogen hast noch einmal genauer,
dann findest du auch eine Lösung für div.img.

Auf Wiederlesen
Detlef

[willie.de]

Hallö, Detlef G,

danke für deine Mühe! So wirds halbwegs verständlich. Werd mich morgen mal ransetzen.

Lies mal dass, wass du heute Früh nur überflogen hast noch einmal genauer,

Werd ich tun. Hab nur wirklich grad gar keine Zeit... Nochmals Danke für den Link!

Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Ich hab div.content red und div.img yellow gesetzt.

Sehr schön, jetzt weißt du, dass das Problem darin besteht, dass div.content
zu klein ist.

Also, dein CSS:

div.content { ... padding:0 20px 5em 0; ... height:100%; ... }

also 100% + 5em Höhe des Elternelements, das ist body

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

aha, also body ist 100% von html also 100% des Viewports.

Du wolltest doch sicher, dass div.content nicht genau 100% sondern
mindestens 100% hoch ist.
(Ist das überhaupt nötig?)

div.img,div.img2 { margin-left:2em; width:790px; border:solid 1px yellow; background:navy; height:10em; overflow:scroll; }

Sollen die Bilder wirklich im kleinen Fenster gescrollt werden?

Auf Wiederlesen
Detlef

[willie.de]

Hallö nochmal,

Du wolltest doch sicher, dass div.content nicht genau 100% sondern
mindestens 100% hoch ist.
(Ist das überhaupt nötig?)
zu klein ist.

Hmmm. Das hatte ich für diesen blöden M$IE (der kann ja keine min-...) gemacht. Okay. Fehler erkannt. Danke!

Sollen die Bilder wirklich im kleinen Fenster gescrollt werden?

Natürlich nicht. Aber das stand in meinem anderen Posting.

Das Problem bleibt IMHO bestehen: der div.img bleibt auf beinahe 0-Höhe. Das heißt, er hat die Höhe des Textes 'div.img'. Die gefloateten Bereiche darin verändern die Höhe nicht. Oder seh ich das falsch? http://ox-production.de/was.html

Danke für Unterstützung und
Grüße aus Leipzig
willie

[wahsaga]

hi,

Das Problem bleibt IMHO bestehen: der div.img bleibt auf beinahe 0-Höhe. Das heißt, er hat die Höhe des Textes 'div.img'. Die gefloateten Bereiche darin verändern die Höhe nicht.

Bravo, die Erkenntnis, dass du mit float ein Element aus dem Fluß nimmst, ist jetzt also auch bei dir angekommen.

gruß,
wahsaga

[willie.de]

Hallö, wahsaga,

Bravo, die Erkenntnis, dass du mit float ein Element aus dem Fluß nimmst, ist jetzt also auch bei dir angekommen.

Da dank ich doch für den Nasenstüber! Damit hat sich wohl mein anderes Posting erledigt.

Trotzdem zur Verdeutlichung: Auf http://ox-production.de/was.html ist der div.content immerhin so hoch, dass der Inhalt des div.img hinein passt. Wieso passt dieser Inhalt nicht in div.img selbst?

Grüße aus Leipzig
willie

[Detlef G.]

Hallo willie

Das Problem bleibt IMHO bestehen: der div.img bleibt auf beinahe 0-Höhe. Das heißt, er hat die Höhe des Textes 'div.img'. Die gefloateten Bereiche darin verändern die Höhe nicht. Oder seh ich das falsch?

Dazu lies mal float-Umgebungen verschachteln.

Auf Wiederlesen
Detlef

[willie.de]

Hallö, Detlef G.,

Dazu lies mal float-Umgebungen verschachteln.

Großes Danke für den Link, klingt bei Überfliegen hoch interessant. Herrn Turski les ich gerne...

Danke für Unterstützung und
Grüße aus Leipzig
willie