✔ margin auto Problem im IE6

Status
Nicht offen für weitere Antworten.
desaster0505

desaster0505

Erfahrenes Mitglied
Hallo!

Ich habe möchte den "Body" meines Dokuments mittig ausrichten. Mir ist bekannt das der IE6 Probleme mit dem "auto" bei margin Probleme hat, also hab ich das mal so gemacht:
CSS: 
BODY {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	FONT-SIZE: 0.7em;
	PADDING-BOTTOM: 10px;
	PADDING-TOP: 10px;
	FONT-FAMILY: arial, helv, sans-serif;
	width:1194px;
	background:url('pics/bg_2.jpg') repeat-x;
	margin-top: 18px;
	margin-right: auto;
	margin-bottom: 2px;
	margin-left: auto;
	}

Aber leider ist der "Body" trotzdem fast ganz links.
Wo ist da das Problem und wie kann ich das beheben? Es taucht auch nur beim IE6 auf. FF, IE7, Opera funktionieren.

Hoffe es kann mir jemand da weiterhelfen, ich blicke es einfach nicht mehr.
 
Hi,

ich würde die Angaben zum Boxmodell auf ein Nachfolgeelement des body-Elements anwenden, denn wie es aussieht, unterstützt hier der IE6 die width-Formatierung des body-Elements nicht, und somit auch nicht margin-left:auto / margin-right:auto, um es im Viewport horizontal zu zentrieren.
 
Hi!

Ich habe nach dem Body einen großen DIV-Container für jeglichen Inhalt "id=content". Dafür habe ich nun folgende Regel probiert:

CSS: 
#content{
	margin:0px;
	height:1000px;
	width:1194px; 
	background:url('pics/content_bg.png');
	margin-right: auto;
	margin-left: auto;
}

Das steht bei mir im BODY:

HTML: 
<body >
	<div id="content">
	
		....
		
	</div> 
</body>

Aber leider bringt auch das keine Änderung.

Irgendeine andere Idee die ich probieren könnte ? Wie macht man sowas denn normalerweise für den IE6. Es gibt doch auch Seiten die im IE6 so angezeigt werden.
 
Hi,

wenn auch das nicht weiterhilft, schliesse ich daraus, dass du den IE6 durch den sog. Doctype-Switch in den "Quirksmode" schaltest, denn in diesem Darstellungsmodus unterstützt er das CSS-Boxmodell nicht, in diesem Fall margin-left:auto und margin-right:auto für #content.

Da der IE7 nach deinen eigenen Aussagen das Stylesheet korrekt interpretiert, ist anzunehmen, dass vor dem Doctype eine XML-Deklaration notiert ist, die ihn nicht, wie seine Vorgängerversionen, in den "Quirksmode" schaltet. (vor der XML-Deklaration bzw. zwischen ihr und der Doctype-Angabe ist kein HTML-Kommentar notiert)

Wenn ich dem IE6, wie den anderen genannten Browsern, das Dokument im "Standardsmode" übergebe, nimmt er auch dein zunächst gezeigtes Stylesheet problemlos an.

Eine Box, wie das DIV #content, bekommst du im "Notfall" mit

Code: 
body { text-align:center; }
im Anzeigebereich horizontal zentriert.

Die Box selber erhält dann im Gegenzug text-align:left, falls ihr Inhalt nicht zentriert werden soll.
 
Da könntest du recht haben. Ich habe vor der DocType-Deklaration die XML-Version stehen. Und nach deinem Hinweis habe ich nachgelesen, dass der dum**e IE6 dann die korrekten Anweisungen falsch interpretiert und dann in den Quirksmodus schaltet.

Wie kann ich das denn umgehen, denn ich will das schon korrekt angeben, aber nur der IE6 soll das "falsch" lesen. Kennst du dafür eine Möglichkeit?

Maik hat gesagt.:
Hi,

wenn auch das nicht weiterhilft, schliesse ich daraus, dass du den IE6 durch den sog. Doctype-Switch in den "Quirksmode" schaltest, denn in diesem Darstellungsmodus unterstützt er das CSS-Boxmodell nicht, in diesem Fall margin-left:auto und margin-right:auto für #content.
Zum Vergrößern anklicken....

Aber ich habe das ja, wie du im vorherigen Beitrag siehst bereits siehst in der Regel für das #content aufgenommen und das brachte keinen Unterschied :confused:
 
Wie gesagt, im "Quirksmodus" unterstützt der IE nicht die margin:auto-Deklaration, um damit ein Element im Anzeigebereich horizontal zu zentrieren, und wie das DIV #content vom IE dennoch in der Fenstermitte ausgerichtet wird, hab ich dir in meinem letzten Post gezeigt.

Was die gewünschte Formatierung des body-Elements betrifft, so funktioniert sie nur, wenn der IE im "Standardsmode" läuft.

Ansonsten wirst du diese Eigenschaften an ein weiteres DIV übergeben müssen, damit es mittels body{text-align:center;} im Fenster horizontal zentriert wird.
 
Ja, das mit dem text-align:center hat das Problem gelöst :) .

Ein Problem hätte ich aber noch, ich hab in dem #content folgendes drin:

HTML: 
<div class="xsnazzy" style="float:left;">
			<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
			</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
			<div class="xboxcontent">
				<h1 class="color_a">Leistungen</h1>
				<p>Inhalt</p>				
			</div>
			<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
			<b class="xb2"></b><b class="xb1"></b></b>
		</div>

dazugehöriges CSS:

CSS: 
.xsnazzy {
background: transparent; 
width:400px; /*Breite der Box*/ 
float:left; 
margin-top:100px;
margin-left:125px;
}


.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:250px;   /* Höhe der Box*/
}

Auch hier macht wieder nur der IE6 Probleme in dem er das Div-Element zu weit nach Rechts rückt. In den anderen Browsern gibts keine Probleme. Wie kann ich das denn beheben?
Sorry, aber was den IE6 angeht blicke ich einfach nicht komplett durch :(
 
Hier wird sich wohl der "Double-Margin-Bug" bemerkbar machen, bei dem der IE6 den margin-left-Wert verdoppelt.

Abhilfe schafft da die Hinzunahme von display:inline für das DIV .xsnazzy.
 
Oja, das war der Grund jetzt wird die Seite halbwegs vernünftig im IE angezeigt. Danke dir. Die Höhe von 250px akzeptiert der IE6 auch nicht, aber ich versuch das mal selbst rauszufinden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück