nicht angemeldet
IE-Problem: Box umschließt Nachbar-Box
Ich sehe mich mal wieder mit einem Kompatibilitäts-Problem konfrontiert. Die Darstellung ist im Mozilla wie gewünscht, der Internet Explorer macht allerdings Probleme und ich weiß nicht, weshalb.
Dies ist die Testseite, auf der ich versucht habe, den Fehler möglichst einzugrenzen:
http://user96.kundenserver9hsgbr.de/errors/test.html
Das wird im Firefox angezeigt:
http://user96.kundenserver9hsgbr.de/errors/mozilla.gif
Und das ist das ist das Render-Ergebnis vom IE:
http://user96.kundenserver9hsgbr.de/errors/internet-explorer.gif
Wie man sieht, wird anscheinend die Footer-Box von der Content-Box umschlossen, obwohl sie eigentlich nebeneinander stehen sollten. (Diesen Effekt konnte ich auch nur beobachten, wenn ich dem "box"-div das padding-Attribut zugewiesen hatte)
Kann sich jemand vorstellen, weshalb dieser Darstellungs-Fehler auftritt? Wie behebt man ihn? (Gibt es eigentlich eine Internetseite, die alle möglichen Darstellungsfehler von verschiedenen Browsern sammelt und Workarounds aufzeigt?)
-
Hallo,
Es funktioniert, wenn du dem #content-Div eine Breite (z.b. 100%) angibst.Aber frag mich nicht wieso es dann geht. Ist wohl mal wieder so ein klassischer IE-render-Bug :(
-
Hallo,
Dies ist die Testseite, auf der ich versucht habe, den Fehler möglichst einzugrenzen:
http://user96.kundenserver9hsgbr.de/errors/test.htmlWie man sieht, wird anscheinend die Footer-Box von der Content-Box umschlossen, obwohl sie eigentlich nebeneinander stehen sollten.
Nein untereinander.
(Diesen Effekt konnte ich auch nur beobachten, wenn ich dem "box"-div das padding-Attribut zugewiesen hatte)
Kann sich jemand vorstellen, weshalb dieser Darstellungs-Fehler auftritt?Ja, der IE hat diverse Probleme mit der Höhenberechnung von Boxen beim Rendern.
Wie behebt man ihn?
Üblicherweise indem man speziell für den IE (via Conditional Comments) eine Höhenangabe für die betroffene Box (bei Dir DIV#content) vornimmt. Da IE height wie min-height rendert, also die Box ausdehnt, wenn mehr Inhalt vorhanden ist und overflow:auto ist, kann man da height:1px angeben.
Oft reicht es auch, wenn man für alle Browser, also im richtigen[TM] CSS, der Box DIV#content {height:100%;} verpasst. Solange das umgebende Element keine explizite Höhenangabe hat, wird das von standardkonformen Browsern ignioriert. Dem IE reicht das aber oft als Schlag auf den Hinterkopf.
(Gibt es eigentlich eine Internetseite, die alle möglichen Darstellungsfehler von verschiedenen Browsern sammelt und Workarounds aufzeigt?)
Naja, alle wohl nicht, aber viele http://www.quirksmode.org/
viele Grüße
Axel
-
Nein untereinander.
Mit nebeneinander meinte ich die Beziehung der beiden Boxen innerhalb des DOM, in der Darstellung werden sie untereinander gerendert, das ist richtig.
Vielen Dank für die schnelle Hilfe, mit den zusätzlichen Angaben versteht's auch der IE und die Boxen werden richtig dargestellt.
-
Hallo,
Vielen Dank für die schnelle Hilfe, mit den zusätzlichen Angaben versteht's auch der IE und die Boxen werden richtig dargestellt.
Wobei die von Jörg vorgeschlagene Methode, eine Breite vorzugeben, die bessere ist, solange das möglich ist. Sie funktioniert sicher für alle Browser, wogegen das height:100% eigentlich auf Fehlertoleranz der Browser setzt.
viele Grüße
Axel
-
-
Ahoj!
(Gibt es eigentlich eine Internetseite, die alle möglichen Darstellungsfehler von verschiedenen Browsern sammelt und Workarounds aufzeigt?)
Naja, alle wohl nicht, aber viele http://www.quirksmode.org/http://www.positioniseverything.net/ ist als Ergänzung auch noch sehr interessant, besonders die "Browser specific bug demos" (3 Links etwa in der Mitte der Seite).
Viele Grüße vom Længlich
-