FF / IE: Unterschiedliche Darstellung des Backgrounds (width: 100%)

[shorty]

Guten Tag,

ich versuche derzeitig einen Hintergrund, der über die gesamte Breites eines Layout gehen soll, darzustellen. Im FF funktioniert alles wunderbar, nur der IE (in meinem Fall: Version 7) macht folgendes Problem: Die Weite ist mit 100% belegt, jedoch ist die tatsächliche Weite im IE ca. bei 70%.

Ich hab gleichzeitig ein Bild angehängt (1. Bild = FF, 2. Bild = IE), damit ihr sehen könnt, was ich im Endeffekt meine. Außerdem poste ich noch den betreffenden CSS Code:

	position: absolute;
	top: 46px;

	background-image: url('../images/layout/bgtop.gif');
	background-repeat: repeat-x;
	
	height: 83px;
	width: 100%;
	
	z-index: 1;

Habt ihr vllt. eine Möglichkeit, dieses Problem zu lösen?

 

[Maik]

Hi,

mit dem Quellcode-Auszug kann ich das Darstellungsproblem im IE7 nicht reproduzieren.

Kannst du mal den Link zur Seite nennen, damit man sich das dort direkt anschauen kann?

 

[shorty]

Jepp, der Link zur der Seite -> http://www.2dswork.info/hmdesign/index.php

 

[Maik]

Das hängt mit der horizontalen Positionierung des DIVs #Header zusammen, denn wie man unschwer erkennen kann, endet das DIV #Stripe_Top, und damit sein Hintergrundbild, an dessen rechten Elementrand.

Wenn ich hingegen für #Header folgende Regel anwende, wird das Hintergrundbild im IE 6 + 7 auf der vollen Fensterbreite angezeigt:

#Header {

        position: relative;
        /*left: 50%;*/ /* auskommentiert = deaktiviert */

        background-image: url('http://www.2dswork.info/hmdesign/images/layout/banner.gif');
        background-repeat: no-repeat;
        background-position: center top;
        /*width: 808px;*/ /* auskommentiert = deaktiviert */
        height: 136px;

        /*margin-left: -404px;*/ /* auskommentiert = deaktiviert */

        z-index: 2;

}

 

[shorty]

Das sieht doch schonmal gut aus. Vielen Dank.

Noch zwei kleine Problemchen: Woran könnte es liegen, dass die Seite Scrollbalken enthält, obwohl der Anzeigebereich "kleiner" ist. Hätte es eigentlich gerne, dass der Layer "#Footer" am unteren Rand der Seite angezeigt wird.

Und weshalb ist der linke Bereich in "#Content_Left" nur so hoch wie der Inhalt, der sich darin befindet bzw. fließt durch den "#Footer" durch, wenn "#Content_Right" kleiner vom Inhalt ist, als "#Content_Left" ? (Beispiel: http://www.2dswork.info/hmdesign/index.php?MenuItem=Kontakt)

 

[Maik]

Der IE zeigt standardmäßig den "inaktiven" Scrollbalken an, wenn für den Viewport und Dokumentkörper kein overflow:auto deklariert wird:

html,body {
overflow:auto;
}

Dass der Inhalt im Firefox unter dem Footer hindurchläuft, liegt einfach daran, dass du in ihm das Floaten der Spalten mittels clear:left nicht aufhebst:

#Footer {

        position: relative;
        /* left: 50%; */
        /*top: -83px;*/

        background-image: url('../images/layout/footer.gif');
        background-repeat: no-repeat;
        background-position: center bottom;

        /* width: 808px; */
        height: 60px;

        /* margin-left: -404px; */

        z-index: 2;
        clear:left;

}

 

[shorty]

Der IE zeigt standardmäßig den "inaktiven" Scrollbalken an, wenn für den Viewport und Dokumentkörper kein overflow:auto deklariert wird:

html,body {
overflow:auto;
}

Das meinte ich gar nicht genau. Aber zurzeit wird unter dem Footer noch ein Bereich angezeigt (zumindest im FF), der eine bestimmte Höhe hat und ich weiß nicht warum. Da liegt kein Layer, der diese Höhe hat oder sonstiges, aber dadurch kann man die Seite eben scrollen.

 

[Maik]

Möglicherweise hilft es weiter, wenn du die Polsterungseigenschaften des Viewports und Dokumentkörpers zurücksetzt:

html,body {
overflow:auto;
margin:0;
padding:0;
}

 

[Maik]

Okay, ich denke, dass es an der relativen Positionierung des DIVs #Stripe_Bottom liegt.

Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.

• Quelle:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Wenn der Abstand zum unteren Fensterrand die 60px unterschreitet, erscheint der Scrollbalken in allen Browsern.

 

[shorty]

Wenn ich die relative Positionierung durch absolut ersetzte kann ich es zwar auf einen statischen Inhalt anpassen, sobald er aber dynamisch ist, verschiebt sich "#Stripe_Bottom" nicht mit...