✔ 100% height Problem

Ich habe mich in meinem vorherigen Post darauf bezogen, dass dein Hintergrund bei längerem Inhalt nur so hoch ist wie das Browserfenster (und beim Scrollen aufhört).

Ich denke, die einfachste Lösung, dein Problem in den Griff zu bekommen, wäre, das Papier einfach teil des Seitenhintergrunds zu machen und diesen zu zentrieren (und dann y-repeat). Dann musst du nur darauf achten, dass er auch für höhere Auflösungen breit genug ist.
 
Zuletzt bearbeitet:
Genau genommen weiß ich schon gar nicht mehr so genau worum es hier geht , der Body Hintergrund die Grafik mit den Schriften ist anstandslos bis zum Ende egal welche Seite aber der Content Bereich hört einfach auf unterwegs, dafür änder das CSS für die haupt box mal ab in dieses hier

Code: 
#haupt_box {
    width: 800px;
    margin-left: auto;
    margin-right: auto
    min-height:100%;
    height:100%;
    height: auto !important;
    background-image: url("../gfx/layout_bg.png");
}

min-height ist für alle Browser ausser den IE 6
height 100% ist dann für den IE 6 das height Attribute ist bei dem IE 6 das min height
der macht es also auch so höher.
das height: auto !important; überschreibt in den anderen Browsern das height:100% wieder .
 
Zuletzt bearbeitet:
Naja eigentlich klappt dies auch beim IE 6.0 den muss man eben nur nen Doctype mitgeben immer sonst kommt es da 100% zu Fehldarstellungen. Zumindest hat es bei mir immer so geklappt.

Müsste man mal testen im IE 6.0 wobei der auch schon bald wieder zu vernachlässigen ist inzwischen muss ich auch offen zugeben da er nun wirklich alt ist und schon der IE 8 über das automatische Update installiert wird , bzw bei Vista gibs den 7.0 sowieso von Haus aus.

##EDIT##

Was soll ich da sagen Browsershots hat Recht wenn ich den IE 6.0 mal starte und mir das dort anseh klappt das nicht.

Also dann in dieser Reinfolge dann klappt es.

min-height:100%; // das kennt der ie 6.0 nicht aber der 7.0 schon und die anderen Browser auch
height:auto !important; // als 2. height auto kennt der IE 6.0 auch nicht beim 7.0 bin ich mir nicht sicher important ist halt das Attribut nehmen wenn bekannt würde ich behaupten
height:100%; // das erkennt der IE 6.0 als eine min höhe an , mehr nimmt der immer bis man ihm sagt overflow:hidden; erst dann akzeptiert der eine feste Höhenangabe.

Also muss es am Ende quasi einfach so aussehen dann klappt es auch im IE 6.0 nach meinen eigenen Tests nun ;)

Code: 
#haupt_box {
    width: 800px;
    margin:0px auto;
    min-height:100%;
    height: auto !important;
    height:100%;
    background-image: url("../gfx/layout_bg.png");
}
 
Zuletzt bearbeitet:
FipsTheThief hat gesagt.:
Naja eigentlich klappt dies auch beim IE 6.0 den muss man eben nur nen Doctype mitgeben immer sonst kommt es da 100% zu Fehldarstellungen. Zumindest hat es bei mir immer so geklappt.
Zum Vergrößern anklicken....
Mit dem Doctype hängt dies nicht zusammen, sondern mit deinem CSS-Vorschlag in Post #12, der korrigiert gehört, da ansonsten der IE6 zuletzt auf height:auto !important zurückgreift.

CSS: 
#haupt_box {
    width: 800px;
    margin-left: auto;
    margin-right: auto
    min-height:100%; /* Mindesthöhe in modernen Browsern */
    height: auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height:100%-Deklaration ignorieren */
    height:100%; /* "Mindesthöhe" in IE6 */
    background-image: url("../gfx/layout_bg.png");
}

mfg Maik
 
Ja Maik das habe ich in meinen Tests auch wieder fest gestellt und ist etwas wo ich die Reinfolge immer wieder verwechsel und ich bin mir sicher das ich den Fehler das nächste mal wieder machen werde ;)

Inzwischen wurde dies aber korregiert und getestet.
 
Wenn du dir diese Reihenfolge nicht merken kannst, nutze doch die Conditional Comments für den IE6 ;)

  • style.css:
CSS: 
#box {
min-height:100%;
}
  • ie6.css:
CSS: 
#box {
height:100%;
}

Oder greife einfach auf ie7-js zurück.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück