Firefox & CSS Box Modell : Box schneidet Inhalt ab

[rene]

Hallo,

ich bin langsam am verzweifeln, seit Tagen versuche ich das Problem in den Griff zu bekommen:

Ich benutze das CSS-Box-Modell für das Layout einer Homepage. Die Main-Box (<div>-Element), also die Box, in der der wesentliche Hauptteil steht (es gibt noch eine kleine Navigationsbox) ist je nach per Navigation ausgewähltem Inhalt verschieden lang, d.h die Box ist immer unterschiedlich hoch. Das stellt eigentlich auch überhaupt kein Problem dar, doch bei 10 von 50 Seitenaufrufen mit dem Firefox 0.9.3 (Windows/Linux) schneidet der Browser einfach den Inhalt ab. Also er rendert die Box zu kurz, so das der Inhalt nicht mehr in der Höhe passt. Da ich die Box sowieso mit "overflow:auto;" formatiert habe, um unschönes Verhalten beim Verkleinern des Browserfensters zu verhindern, bietet er mir immerhin an, innerhalb der Box den Inhalt zu scrollen. Jedoch völlig unnötig, da ausreichend Platz vorhanden ist. Und wie gesagt, von 50 Seitenaufrufen macht er es vielleicht 10 mal so, ansonsten richtig, also die Box in ihrer Höhe entsprechend dem Inhalt ausgerichtet. Das fehlerhafte Verhalten tritt allerdings NUR auf, wenn der Inhalt zum Beispiel eine Tabelle ist, deren Zelleninhalte (und damit Höhe) nicht von vornherein feststehen, sondern zum Beispiel aus Bildern oder auch nur einfachem Text bestehen, die/der über ein php-Script aus einer Datenbank gelesen werden/wird.
Sollte sich in der Box dagegen nur "statischer" Text befinden, gibts keinerlei Probleme. Problematisch dagegen sind bei mir das Gästebuch, meine Fotorubrik und Darstellungen von Datenbank-Inhalten. Hier wird immer wieder mal die umschliessende Box in der Höhe zu kurz gerendert, so dass ihr Inhalt einfach abgeschnitten wird, und nur (zufällig) durch overflow:auto; immerhin noch scrollbar ist, lass ich dagegen die overflow-Eigenschaft einfach weg, dann ist der abgeschnittene Inhalt auch tatsächlich nicht mehr erreichbar ! Oft reicht ein Reload der Seite, Firefox macht es ja nicht immer falsch, aber auf den MEISTEN anderen Browsern wie Internet Explorer 6, Opera 7.54 und KDE Konqueror 3.3 konnte ich dieses Problem nicht reproduzieren, nur der Firefox, bzw, die Gecko-Engine macht Probleme.

Weiß jemand Rat ?

Gruß
rene

[ziegenmelker]

Hallo rene,

kann man sich das irgendwo ansehen?
Hast du
head, body {height:100%}
angegeben?
Eventuell hilft dir auch die Steuerung des Outputs deiner php-Seite.
http://de3.php.net/manual/de/ref.outcontrol.php

cu,
ziegenmelker

[rene]

Hier sieht man, wie er es manchmal falsch macht:

[rene]

Und hier, wie es dann richtig, nach Releoad, aussieht:

[MudGuard]

Hi,

head, body {height:100%}

Für head gilt im Normalfall display:none - also bringt auch eine Größenangabe für head relativ wenig.

Du meintest vermutlich

html, body { height:100%; }
(mit allen damit zusammenhängenden Problemen - meist wäre min-height:100% besser, was aber der IE wieder nicht kann).

cu,
Andreas

[rene]

Trotz

html, body { height:100%; }

kommt dass hier dabei wieder dabei raus:

[ziegenmelker]

Hi,

Hi,

head, body {height:100%}

Für head gilt im Normalfall display:none - also bringt auch eine Größenangabe für head relativ wenig.

Du meintest vermutlich

html, body { height:100%; }
(mit allen damit zusammenhängenden Problemen - meist wäre min-height:100% besser, was aber der IE wieder nicht kann).

cu,
Andreas

junge, junge, was der Mensch so alles an Tippfehlern zustandebringt, muß wohl am Alter ligen ;-)
Aber welche Probleme meinst du, was kann ich da noch lernen?

cu,
ziegenmelker

[MudGuard]

Hi,

html, body { height:100%; }
(mit allen damit zusammenhängenden Problemen - meist wäre min-height:100% besser, was aber der IE wieder nicht kann).

Aber welche Probleme meinst du, was kann ich da noch lernen?

Z.B. wenn der tatsächliche Inhalt dann doch höher wird als die 100%, hört das Element (also Hintergrundfarbe) auf, nur der Element-Inhalt fließt darüber hinaus (siehe Definition von overflow)
Oder: am bottom ausgerichtete Elemente sitzen dann eben am Fensterende, nicht am Ende des Inhalts.
Usw.

cu,
Andreas

[Fritz]

Hallo,
http://validator.w3.org/check?uri=http://www.rk1977.de/
(sorry, die Forum Software scheint Probleme mit dem link zu haben - oder mach ich was falsch?
Gruß Fritz

[MudGuard]

Hi,

http://validator.w3.org/check?uri=http://www.rk1977.de/
(sorry, die Forum Software scheint Probleme mit dem link zu haben - oder mach ich was falsch?

Ja, Du machst was falsch: im Query-String müssen / urlcodiert werden:
http://validator.w3.org/check?uri=http:%2F%2Fwww.rk1977.de%2F

cu,
Andreas

[rene]

OK, hab beim Test gesehen, dass ich noch ein paar kleine Fehler drin hatte, die sind nun behoben, der Quellcode zumindest für die Startseite und für den Fotobereich soweit XHTML Transitional Valid, ausser beim aufklappenden Navigations-Menü, da benutze ich <li> ohne <ul> um die Einrückung zu vermeiden, das kann sollte aber nicht die Ursache für mein Problem sein.

[MudGuard]

Hi,

OK, hab beim Test gesehen, dass ich noch ein paar kleine Fehler drin hatte, die sind nun behoben, der Quellcode zumindest für die Startseite und für den Fotobereich soweit XHTML Transitional Valid, ausser beim aufklappenden Navigations-Menü, da benutze ich <li> ohne <ul> um die Einrückung zu vermeiden, das kann sollte aber nicht die Ursache für mein Problem sein.

HÄ? Wenn Du keine Einrückung haben willst, dann sag doch einfach, daß Du keine Einrückung haben willst. Dafür gibt es doch CSS - insbes. margin und padding.
Falschen Code brauchst Du für eine nichteingerückte Liste jedenfalls nicht.

cu,
Andreas

[rene]

HÄ? Wenn Du keine Einrückung haben willst, dann sag doch einfach, daß Du keine Einrückung haben willst. Dafür gibt es doch CSS - insbes. margin und padding.
Falschen Code brauchst Du für eine nichteingerückte Liste jedenfalls nicht.

cu,
Andreas

Dann gib mir mal ein Beispiel !
Das ist jetzt zwar nicht das Problem, warum ich hier überhaupt das Forum aufgesucht habe, aber es ist ja nicht so, als wenn mich valider Code nicht interessieren würde :-)
Ich hab jetzt sowohl für <ul> als auch für <li> margin auf 0px gesetzt, und trotzdem ist alles eingerückt !! Schau es dir an auf www.rk1977.de, wenn du auf Fotos klickst.

Gruß
rene

[rene]

Ok, ein padding bei <ul> war's :-)
Jetzt funktioniert es. Danke für den Hinweis !!

Aber nun nochmal zurück zu meinem eigentlichen Problem !
Hat keiner eine Idee, wie man das Abschneiden des Inhalts durch die umschliessende Box, dass NUR im Firefox auftritt und auch NUR MANCHMAL, irgendwie zu vermeiden ?

Gruß
rene

[Fritz]

Hallo,

Aber nun nochmal zurück zu meinem eigentlichen Problem !
Hat keiner eine Idee, wie man das Abschneiden des Inhalts durch die umschliessende Box, dass NUR im Firefox auftritt und auch NUR MANCHMAL, irgendwie zu vermeiden ?

http://positioniseverything.net/easyclearing.html
dort gibt's jede Menge guter Infos zu Positionierung mit CSS (wie der Name sagt ;-)
Unter anderm hab ich mir dort abgeguckt:

.clearfix {
 margin:5px;
 padding:5px;
 border:1px solid #aaa;
 background-color:#fff;
}
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
* html .clearfix {height: 1%;}

um eine Boxhöhe zu erzwingen.
Vielleicht hilft's?

Gruß Fritz